Ionic - How to alternate active mode for buttons?

ionic-v1
1

Currently I am using controller to control the button to be active and inactive upon clicking it. However, my “ON” and “OFF” button will become active and inactive together when one of it is being click.
How should i make it alternate? Example: When I click “ON”, it will become active and “OFF” to be inactive. If I click “OFF”, the “ON” becomes inactive and “OFF” will be active.

controller.js

.controller('singleProjectorRoomCtrl', ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.goBack = function() {
window.history.back();
}

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

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>
2

The if clause in your toggleButton function is unnecessary. Instead, do this:

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

How about changing the active on my button alternately? I’m not quite sure how to code it.

4

Your logic is flawed. The entire method need only be this line:

$scope.buttonActive = !$scope.buttonActive

You don’t need the if statement at all.

5

I have changed it. How about changing the active on my button alternately?