ionic - 单击时如何更改按钮颜色

Question

目前，我正在尝试使我的移动应用程序成为当我进入我的应用程序时，我的 OFF 按钮的默认灰色（活动）。 ON 按钮的默认绿色（未激活）。点击 ON 按钮后，ON 按钮变为灰色（激活），而 OFF 按钮变为红色（未激活）。当我点击OFF按钮时，按钮将变回灰色（活动）。

我正在展示我想要实现的粗略想法。有人知道怎么用flag编码吗？

controller.js

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

$scope.buttonState = false;


function toggleButtonState ()
{
    if ($scope.buttonState == false)
    {
        $scope.buttonState = true;
    }
    else
    { 
       $scope.buttonState = false;
    }  
};

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

}])

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-balanced button-large icon-right ion-power" ng-click="toggleButtonState()" ng-if="buttonState=true; button-stable">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-assertive button-large icon-right ion-android-cancel" ng-click="toggleButtonState()" ng-if="buttonState=true; button-stable">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>

Answer 1

您可以使用ng-class 指令。使用您现有的代码，您需要做的就是：

HTML：

<button class="myButtonClass" ng-class="{buttonActive: buttonState == true}" ng-click="buttonState = !buttonState">
    Toggle Me
</button>

然后你就会有你的 CSS 类：

.myButtonClass {
    background: gray;
}
.myButtonClass.buttonActive {
    background: red !important;
}

这是一个基本的演示：http://jsfiddle.net/mbndkt9L/3/