Javascript 调用ng click后对ng类没有影响

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>

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

控制台输出表示变量

btnclass

确实发生了变化，但单击按钮后，我看不到对按钮颜色的影响

"done3 " true 
false 
"done3 " false 
true

编辑

---

因为，很多人一直在质疑ng类表达式的语法，我想澄清一下，这是一种古老的语法，它是有效的。参考。

我认为你的ng课程落后了

ng class=“{'className'：bool}

---

另外，您不希望使用

true

和

false

来应用类，您希望使用具有值的模型值，

btnClass

您可以使用三元运算符：

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

此外，您不需要使用 div中的ng init=“btnclass=false”。btnclass将为false

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

根据的文档，您使用的表达式是错误的。如果您使用的是对象语法，则您的键应为类名，值应为以下表达式这：

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

---

表达式是向后的，但是范围也有问题。您正在传递ng repeater的索引，但是当

toggle

中的代码点击时

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

第一次，它将一个新的控制器作用域

btnclass

值设置为

true

，并且对调用它的按钮的值不做任何更改。下次点击任何按钮时，它只会将“全局”btnclass更改为

false

。每个按钮的值都不会更改

根据

标记

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

我将属性

label

和

btnclass

添加到tokens对象，因此您可以将它们的对象传递给

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>

{x.label}

---

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

所需的基本功能可以由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="toggle($index)">{{x}}</button>
                </div>

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

---

我仍然不确定为什么发布的问题在内联版本有效时不起作用（可能在范围解析方面存在一些问题？），但这个技巧对我有效。

我认为您的ng类是向后的。ng class=“{'className'：bool}“我也不会使用ng init，我只会在controllerAgreed中初始化

$scope.btnClass

，我只是简单地将注意力集中在手头的问题上。我的初始化实际上依赖于$index，在实际代码中，我使用了一个函数。使用ng repeat，每个按钮的父项都会得到自己的作用域和btnclass值，因此它们可以独立着色。*是的，这是可行的，但如果我将语句放在函数

toggle

中，它就不能正常工作。是的，我需要做的不仅仅是在每次点击时切换类。我想在如何解决范围方面存在问题。