Ionique - bouton bascule

Question

Actuellement dans mon projet, je peux changer de couleur lorsque mon bouton est active. Cependant, j'ai 2 boutons. Est-ce que quelqu'un sait comment changer le mode actif de ces 2 boutons en alternance? Lorsque 1 est actif, un autre sera inactif immédiatement, ou vice versa.

html

<ion-view title="Single Projector Room" id="page9"> 

<ion-nav-buttons side="left"> 
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()"> 
     <i class="icon ion-ios-arrow-back"> Back</i> 
    </button> 
    </ion-nav-buttons> 

    <ion-content padding="true" style="background: url(img/EDD79InSMCeYeMOSchjm_remote.jpg) no-repeat center;background-size:cover;" class="has-header"> 

    <div class="row"> 
    <div class="col"><br><br><br><br></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Single Projector Control</h4></div> 
    <div class="col col-30 text-center"><h4 style="color: #FFFFFF;">Screen Control</h4></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"> 
     <button class="button button-large icon-right ion-power" ng-class="{'active': buttonActive}" ng-click="toggleButton()">On</button> 
    </div> 
    <div class="col col-30 text-center"> 
     <button class="button button-dark button-large icon-right ion-arrow-up-c">Up</button> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"> 
     <button class="button button-large icon-right ion-android-cancel" "button button-large icon-right ion-power" ng-class="{'active': buttonActive}" ng-click="toggleButton()">Off</button> 
    </div> 
    <div class="col col-30 text-center"> 
     <button class="button button-dark button-large icon-right ion-arrow-down-c">Down</button> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col"><br><br></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Mic Control</h4></div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"> 
     <button class="button button-balanced button-large icon-right ion-power">On</button> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col col-offset-5 col-30 text-center"> 
     <button class="button button-assertive button-large icon-right ion-android-cancel">Off</button> 
    </div> 
    </div> 
</div> 

    </ion-content> 
</ion-view> 

controller.js

.controller('singleProjectorRoomCtrl', ['$scope', '$stateParams', function($scope, $stateParams) { 

$scope.buttonActive = false; 

    $scope.toggleButton = function() { 
     $scope.buttonActive = !$scope.buttonActive; 

    }; 

$scope.goBack = function() { 
window.history.back(); 
} 
}]) 

Answer 1

Voici une solution de contournement de ce que vous voulez atteindre:

var app = angular.module("myApp", []); 
 
app.controller("Ctrl", ["$scope", 
 
    function($scope) { 
 

 
    var myCtrl = this; 
 
    myCtrl.onactive = true; 
 
    myCtrl.offactive = false; 
 

 
    myCtrl.changeColorIcons = function(button) { 
 

 
     if (button === 'on') { 
 
     myCtrl.onactive = true; 
 
     myCtrl.offactive = false; 
 
     } else if (button === 'off') { 
 
     myCtrl.onactive = false; 
 
     myCtrl.offactive = true; 
 
     } 
 
    }; 
 
    } 
 
]);

.button.active, .button:active{ background:yellow !important;}

<link href="http://code.ionicframework.com/0.9.23/css/ionic.css" rel="stylesheet"> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/ionic.js"></script> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular.js"></script> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular-animate.min.js"></script> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/angular/angular-sanitize.min.js"></script> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/angular-ui/angular-ui-router.min.js"></script> 
 
    <script src="http://code.ionicframework.com/0.9.23/js/ionic-angular.js"></script> 
 
    
 
    <div ng-app="myApp"> 
 
    <div ng-controller="Ctrl as myCtrl"> 
 
<ion-view title="Single Projector Room" id="page9"> 
 

 
<ion-nav-buttons side="left"> 
 
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()"> 
 
     <i class="icon ion-ios-arrow-back"> Back</i> 
 
    </button> 
 
    </ion-nav-buttons> 
 

 
    <ion-content padding="true" style="background: url(img/EDD79InSMCeYeMOSchjm_remote.jpg) no-repeat center;background-size:cover;" class="has-header"> 
 

 
    
 

 

 
    <div class="row"> 
 
    <div class="col col-offset-5 col-30 text-center"> 
 
     <button class="button button-large icon-right ion-power"ng-class="{active: myCtrl.onactive}" ng-click="myCtrl.changeColorIcons('on')">On</button> 
 
    </div> 
 
    
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col col-offset-5 col-30 text-center"> 
 
     <button class="button button-large icon-right ion-android-cancel" ng-class="{active: myCtrl.offactive}" ng-click="myCtrl.changeColorIcons('off')">Off</button> 
 
    </div> 
 
    
 
    </div> 
 

 
    
 

 
    </ion-content> 
 

 
</ion-view> 
 
    </div> 
 
</div>