Ionic: показывать активную/неактивную кнопку при двойном нажатии

У меня есть 3 разные кнопки: A, B и C. Сейчас моя кнопка в порядке и отображается активной при первом нажатии. Но когда я нажимаю второй раз на ту же кнопку, неактивная кнопка не отображается. До этого я также обращаюсь к этому , но мне ничем не помочь. Вот демо, а ниже мой код:

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;
   };

Очень нужна ваша помощь, спасибо.


ionic-framework javascript button html ng-class
person siti aishah ismail    schedule 08.03.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

см. мой фрагмент ниже. вы забыли переключить состояние для выбранных кнопок.

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>

person Meiko Rachimow    schedule 08.03.2016