Question

目前在我的项目中，当我的按钮为active时，我可以更改颜色。但是，我有2个按钮。有谁知道如何交替更改这两个按钮的活动模式？当1处于活动状态时，另一个处于非活动状态，反之亦然。

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

以下是您想要实现的解决方法：

＆＃13;

malloc

＆＃13;

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;
      }
    };
  }
]);

＆＃13;

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

＆＃13;

离子 - 切换按钮

1 个答案: