离子：单击两次时显示活动/非活动按钮答案

【问题标题】：Ionic: Show active/inactive button when two times clicked离子：单击两次时显示活动/非活动按钮
【发布时间】：2016-06-22 01:46:56
【问题描述】：

我有 3 个不同的按钮，分别是 A、B 和 C。现在，我的按钮正常，并且在第一次单击时显示为活动状态。但是当我第二次点击同一个按钮时，它没有显示非活动按钮。在此之前，我也参考this，但没有什么可以帮助我。 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;
   };

真的需要你的帮助，谢谢。

【问题讨论】：

标签： javascript html button ionic-framework ng-class

【解决方案1】：

请参阅下面的 sn-p。您忘记切换所选按钮的状态。

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>

【讨论】：