離子：當點擊兩次時顯示激活/不激活按鈕

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

真的需要你的幫助，謝謝。

來源

2016-03-08 siti aishah ismail

請參閱下面的代碼段。您忘記切換選定按鈕的狀態。

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>

來源

2016-03-08 08:02:59

太感謝你了，就像一個魅力：d。 –

離子：當點擊兩次時顯示激活/不激活按鈕

回答

相關問題