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

【问题标题】：How to make a On/Off button in Ionic AND execute a function?如何在 Ionic 中制作开/关按钮并执行功能？
【发布时间】：2016-02-14 07:11:45
【问题描述】：

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"？

【问题讨论】：

您的button 对象是什么？范围内没有显示。请更详细地解释您要做什么
最好将所有逻辑和变量移动到作用域，但可以使用;作为分隔符
; 确实有效。但是如何将所有逻辑和变量移动到作用域？
创建一个按钮对象并调用函数
请举个例子

标签： javascript angularjs ionic-framework

【解决方案1】：

您可以将所有逻辑移至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>

【讨论】：