我有三个不同的按钮,分别是A,B和C。现在,我的按钮是好的,并显示活动时,第一次点击。但当我第二次点击同一个按钮时,它并没有显示inactive按钮。在此之前,我也指的是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;
   };

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

最佳答案

请看下面的片段。您忘记切换所选按钮的状态。

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>

关于javascript - ionic :两次单击时显示事件/不事件按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35861884/

10-11 12:53
查看更多