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

时间:2016-02-13 14:43:22

标签: javascript angularjs ionic-framework

这里有一个很好的解决方案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"

1 个答案:

答案 0 :(得分:1)

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

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

$scope.buttonOn = false;

$scope.someFunction = function() {
  $scope.buttonOn = (!$scope.buttonOn);
  alert('I am pressed');
}
  });
&#13;
<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>
&#13;
&#13;
&#13;