gpt4 book ai didi

javascript - 如何在 Ionic 中制作开/关按钮并执行功能?

转载 作者:行者123 更新时间:2023-11-30 00:14:07 26 4
gpt4 key购买 nike

这里有一个很好的解决方案 How to make a On/Off button in Ionic

这是来自 Codepen 的演示

代码粘贴在这里:

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {

$scope.someFunction = function(){

alert('I am pressed')

}

});

<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>

我的问题是如何在确认按钮的同一个 ng-click 事件上执行 someFunction() 可能像这样 ng-click="someFunction() && button.clicked =!button.clicked" ?

最佳答案

不使用 ; 分隔符,您可以将所有逻辑移动到 someFunction() 中,并将该函数设置为 ng-click 的表达式 属性:

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl', function($scope) {

$scope.buttonOn = false;

$scope.someFunction = function() {
$scope.buttonOn = (!$scope.buttonOn);
alert('I am pressed');
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-click="someFunction()" ng-class="buttonOn?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>

关于javascript - 如何在 Ionic 中制作开/关按钮并执行功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35381246/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com