angularjs - 使用 angularjs 更改默认条件 css 类

Question

我想按长度设置文本样式。所以真为红色，假为绿色。我使用带有表达式的 ng-class。用户点击后可以更改css吗？

这是一个 plunkr：http ://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview

<div>
 <p ng-class="{true:'green',false:'red'}[name.length>3 && toggle]">{{name}}</p>

 <p><b>Length: </b> {{name.length}} character(s)</p>

 <button ng-click="toggle=!toggle">Toggle class</button> 
</div>

Answer 1

最初，toggle是未定义的，我认为在评估表达式时会导致错误[name.length>3 && toggle]。然后，当您单击按钮时，相反的情况undefined为真，因此您的切换开始按预期工作。

要解决此问题，您可以ng-init在处理视图之前评估表达式。

例如，如果您将 div 更改为：

<div ng-init="toggle = true">

然后课程一开始是绿色的。