有条件地将CSS应用于分组按钮栏

Question

在AngularJS中有条件地将CSS应用于grouped button-bar的最佳方法是什么？

到目前为止，我已尝试过以下内容，但似乎无法正常工作：

    <div class="item item-divider">
        Rating
    </div>
    <div class="button-bar">
        <a class="button button-clear" ng-class="{ 'energized': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">1</a>
        <a class="button button-clear" ng-class="{ 'energized': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">2</a>
        <a class="button button-clear" ng-class="{ 'energized': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">3</a>
        <a class="button button-clear" ng-class="{ 'energized': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">4</a>
        <a class="button button-clear" ng-class="{ 'energized': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">5</a>
    </div>  

上面的代码会产生类似这样的内容，因为我正在使用评级系统，而且我只希望一次点亮一个数字。

Answer 1

鉴于您在控制器中使用$scope，您可以执行以下操作：

$scope.setRate = function (value) {
    $scope.rate = value;
}

...然后你的观点会像这样使用：

<div class="button-bar">
    <a class="button button-clear" ng-class="{ 'energized': rate == 1 }" ng-click="setRate(1)">1</a>
    <a class="button button-clear" ng-class="{ 'energized': rate == 2 }" ng-click="setRate(2)">2</a>
    <a class="button button-clear" ng-class="{ 'energized': rate == 3 }" ng-click="setRate(3)">3</a>
    <a class="button button-clear" ng-class="{ 'energized': rate == 4 }" ng-click="setRate(4)">4</a>
    <a class="button button-clear" ng-class="{ 'energized': rate == 5 }" ng-click="setRate(5)">5</a>
</div>  

考虑到这一点，我也会使用ng-repeat ...： - ）

https://jsfiddle.net/3f3tc46w/4/

Answer 2

还有一个ngRepeat版本：

＆＃13;

＆＃13;

angular.module('demo', []).controller('DemoController', function($scope) {
  this.selected = 1;
});

＆＃13;

<link rel="stylesheet" href="http://code.ionicframework.com/0.9.26/css/ionic.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>

<div ng-app="demo" ng-controller="DemoController as demo">
  <div class="item item-divider">Rating</div>
  <div class="button-bar">
    <a class="button button-clear" 
       ng-repeat="i in [1,2,3,4,5]" 
       ng-class="{'button-energized': $index + 1 == demo.selected}" 
       ng-click="demo.selected = i">{{i}}</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

由于您只保留一个变量来处理所有变量，因此所有变量都会一起变化。保留不同的变量来跟踪所有。

        评分     

<div class="button-bar">
    <a class="button button-clear" ng-class="{ 'energized': isButtonClicked1 }" ng-click="isButtonClicked1 = !isButtonClicked1">1</a>
    <a class="button button-clear" ng-class="{ 'energized': isButtonClicked2 }" ng-click="isButtonClicked2 = !isButtonClicked2">2</a>
    <a class="button button-clear" ng-class="{ 'energized': isButtonClicked3 }" ng-click="isButtonClicked3 = !isButtonClicked3">3</a>
    <a class="button button-clear" ng-class="{ 'energized': isButtonClicked4 }" ng-click="isButtonClicked4 = !isButtonClicked4">4</a>
    <a class="button button-clear" ng-class="{ 'energized': isButtonClicked5 }" ng-click="isButtonClicked5 = !isButtonClicked5">5</a>
</div>