Question

HTML

<div style="float:left" data-ng-repeat="x in tokens" ng-init="btnclass=false">
                <button type="button" ng-class="{true:'btn btn-material-light-green btn-sm', false:'btn btn-material-grey btn-sm'}[btnclass]" ng-click="toggle($index)">{{x}}</button>
                </div>

控制器文件

 $scope.toggle = function(i){
    console.log("done"+i+" ",$scope.btnclass);              
    $scope.btnclass=$scope.btnclass?false:true;
    console.log($scope.btnclass);
}

控制台输出表示变量btnclass确实发生了变化，但点击后按钮颜色没有任何影响。

"done3 " true 
false 
"done3 " false 
true

修改由于很多人一直在质疑ng-class表达式的语法，我想澄清这是一个古老的语法，它可以工作。请参阅this question。

Answer 1

你认为你的ng-class是倒退的。 ng-class="{'className': bool}

此外，您不想使用true和false来应用该类，您希望使用具有值btnClass

Answer 2

根据ngClass的文档，您使用该表达式时出错了。如果你正在使用对象语法，那么你的键应该是类名，值应该是这样的表达式：

ng-class="{'btn btn-material-light-green btn-sm': btnclass, 'btn btn-material-grey btn-sm': !btnclass}"

Answer 3

你可以使用三元运算符：

ng-class="btnclass ? 'btn-material-light-green': 'btn-material-grey'"

此外，您不需要使用 div中的ng-init="btnclass=false"。 btnclass将是假的。

由于所有按钮都绑定到相同的btnclass变量，因此如果更改btnclass的值，则所有按钮上的样式都将更改。

Answer 4

你有向后的表达式，但你也有范围问题。您正在传递ng-repeater的索引，但当toggle中的代码命中

时

$scope.btnclass=$scope.btnclass?false:true;

第一次，它将新的控制器范围btnclass值设置为true，并且对调用它的按钮的值不执行任何操作。下次你点击任何按钮时，它只会更改＆＃34;全局＆＃34; btnclass到false。每个按钮的值永远不会改变。

根据tokens对象的外观，您可能希望跟踪该对象中的btnclass设置。

我将属性label和btnclass添加到了令牌对象中，因此您可以将其对象传递给toggle函数：

<div style="float:left" data-ng-repeat="x in tokens">
  <button type="button" class="btn btn-sm" ng-class="{'btn-material-light-green': x.highlight, 'btn-material-grey': !x.highlight}" ng-click="toggle(x)">{{ x.label }}</button>
</div>

我创建了一个更新的Plunker演示here。

Answer 5

Danny的answer可以解决所需的基本功能，但是对于一个要求不仅仅是切换类（在我的情况下也是这样），我最终用以下代码集解决它：

<强> HTML

<div style="float:left" data-ng-repeat="x in tokens" ng-init="btnclass=false">
                <button type="button" ng-class="{true:'btn btn-material-light-green btn-sm', false:'btn btn-material-grey btn-sm'}[btnclass]" ng-click="btnclass=toggle($index)">{{x}}</button>
                </div>

控制器文件

 $scope.toggle = function(btnclassVar,i){
    console.log("done"+i+" ",$scope.btnclass);
    //do here what you need to do with argument 'i'
    //...
    return !btnclassVar;
}

我仍然不确定为什么发布的问题不起作用，而它的内联版本可以工作（范围解决方案中的某些问题可能？），但这个技巧对我有用。

调用ng-click后对ng-class没有影响

5 个答案: