Question

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

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

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>

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

1 个答案: