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

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

控制台输出表明variablesbtnclass确实改变,但点击后我看不到button的颜色。

 "done3 " true false "done3 " false true 

编辑因为,很多人一直在质疑ng类expression式的语法,我想澄清这是一个古老的语法,它的工作原理。 引用这个问题 。

你的ng级是向后的,我想。 ng-class="{'className': bool}

此外,您不希望使用truefalse来应用类,您想要使用具有该值的模型值, btnClass

根据ngClass的文档,你使用的expression是错误的。 如果你使用的是对象语法,那么你的键应该是类名,值应该是这样的expression式:

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

你可以使用三元运算符:

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

另外,你不需要在div中使用ng-init="btnclass=false" 。 btnclass将是错误的。

由于所有button都绑定到相同的btnclassvariables,所以如果btnclass的值发生更改,所有button上的样式都会更改。

你有向后的expression,但你也有一个范围问题。 你正在传递ng-repeater的索引,但是在toggle代码时

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

第一次,它将新的控制器范围的btnclass值设置为true ,并且对调用它的button的值没有任何作用。 下一次你点击任何button,它只是将“全局”btnclass更改为false 。 每个button的值永远不会改变。

根据您的tokens对象的外观,您可能需要跟踪该对象内的btnclass设置。

我将属性labelbtnclass添加到标记对象,因此您可以将其对象传递给togglefunction:

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

我在这里创build了一个更新的Plunker演示。

需要的基本function可以通过Danny的回答来解决,但是对于一个需求而言,不仅仅是切换课程(在我的例子中是这样),我最终用下面的代码集来解决它:

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

我仍然不确定为什么发布的问题不起作用,而它的内联版本的工作原理(在范围解决的一些问题也许?),但这个伎俩为我工作。