Ionic：单击两次时显示 active/inactive 按钮

Question

我有 3 个不同的按钮，分别是 A、B 和 C。现在，我的按钮正常并且在第一次单击时显示为活动状态。但是当我第二次点击同一个按钮时，它没有显示非活动按钮。在此之前，我也参考了, but nothing can help me. Here is the demo，下面是我的代码：

HTML:

<button class="button button-primary" ng-model="button.a" ng-click="select(button.a)" ng-class="button.a.clicked?'button-dark':'button-stable'">
  A
</button>

<button class="button button-primary" ng-model="button.b" ng-click="select(button.b)" ng-class="button.b.clicked?'button-dark':'button-stable'">
  B
</button>

<button class="button button-primary" ng-model="button.c" ng-click="select(button.c)" ng-class="button.c.clicked?'button-dark':'button-stable'">
  B
</button>

Javascript:

   $scope.button = {};
   $scope.button.a = {clicked: false}
   $scope.button.b = {clicked: false}
   $scope.button.c = {clicked: false}

   $scope.select = function(button){
      $scope.button.a.clicked = false;
      $scope.button.b.clicked = false;
      $scope.button.c.clicked = false;

      button.clicked = true;
   };

非常需要您的帮助，谢谢。

Answer 1

请参阅下面的代码段。您忘记切换所选按钮的状态。

angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
  
   $scope.button = {};
   $scope.button.a = {clicked: false}
   $scope.button.b = {clicked: false}
   $scope.button.c = {clicked: false}
   
  $scope.select = function(button){
    var clicked = button.clicked;
    $scope.button.a.clicked = false;
    $scope.button.b.clicked = false;
    $scope.button.c.clicked = false;
    
    button.clicked = !clicked;
  }; 
  
});

<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">
    
   <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.a" ng-click="select(button.a)" ng-class="button.a.clicked?'button-dark':'button-stable'">
      A
    </button>
    
    <button class="button button-primary" ng-model="button.b" ng-click="select(button.b)" ng-class="button.b.clicked?'button-dark':'button-stable'">
      B
    </button>
    
    <button class="button button-primary" ng-model="button.c" ng-click="select(button.c)" ng-class="button.c.clicked?'button-dark':'button-stable'">
      B
    </button>
  </body>
</html>
</div>
  </body>
</html>

Ionic：单击两次时显示 active/inactive 按钮

Ionic: Show active/inactive button when two times clicked

html

javascript

button

ng-class

ionic-framework