离子：当点击两次时显示激活/不激活按钮

问题描述：

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

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

答

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

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>

太感谢你了，就像一个魅力：d。 –

离子：当点击两次时显示激活/不激活按钮

相关推荐