根据状态angularjs更改按钮样式

Question

我在寻找根据状态设置按钮样式的方法时遇到问题。 我有一个问题和四个答案图块。

每个图块的编码如下：

<div class="button-default" ng-model="btn0" ng-click"evalAnswer(answer, btn0)">{{answer}}</div>
<div class="button-default" ng-model="btn1" ng-click"evalAnswer(answer, btn1)">{{answer}}</div>
<div class="button-default" ng-model="btn2" ng-click"evalAnswer(answer, btn2)">{{answer}}</div>
<div class="button-default" ng-model="btn3" ng-click"evalAnswer(answer, btn3)">{{answer}}</div>

在控制器端，我有一个功能，点击时查看答案，如果答案正确则返回“好”，如果答案不好则返回“否”。

我想要在这些良好和否状态中添加按钮样式，以便按钮在答案是否定的情况下变为红色，如果是好的答案则变为绿色。我已经创建了这个类，我只需要将“button-default”更改为“button-good”或“button-wrong”。此外，它只需要更改单击的按钮。

有什么想法吗？

Answer 1

使用ng-class 指令应该根据任何条件切换类

在你的情况下，有两种情况应该是这样的：

<div ng-class="{'true':'button-default','false':'button-unique'}[btn0.state == 'One']" 
     ng-model="btn0" 
     ng-click="evalAnswer(answer, btn0)">{{answer}}</div>

如果你想使用多个案例：

<div ng-class="{'button-default':btn0.state == 'One','button-some':btn0.state == 'Two','button-else':btn0.state == 'Three'}" 
         ng-model="btn0" 
         ng-click="evalAnswer(answer, btn0)">{{answer}}
</div>

演示Fiddle

Answer 2

有多种方法可以实现您想要的：

• ng-class用于根据条件设置类

• ng-style 用于无法定义类或只需要更改简单 css 的情况

如果样式复杂或需要在 css 中进行多次更改，我建议使用ng-class。 ng-class 接受一个表达式，该表达式可以计算为类名数组、分隔类名字符串或对象名映射。

我认为这样的事情应该适用于两个类：

<div ng-class="{{'someBoolean' && 'class-when-good' || 'class-when-nope'}}">{{answer}}</div>

或三元（使用1.1.5以上的角度版本）

<div ng-class="'someBoolean' ? 'class-when-good' : 'class-when-nope'">{{answer}}</div>

请注意，如果除了条件类之外，您还需要应用默认类，可以这样做：

<div ng-class="{{'someBoolean' && 'class-default class-when-good' || 'class-default class-when-nope'}}">{{answer}}</div>

或默认的三元组

<div ng-class="'someBoolean' ? 'class-default class-when-good' : 'class-default class-when-nope'">{{answer}}</div>

另一种选择，我认为可能最适合您的问题的是 ng 样式。由于您只需要更改按钮颜色，因此简单地更改该颜色而不是应用不同的类可能会更好。

<div ng-style="answer === 'good' && {'background-color' : 'green'} || 
                 answer === 'nope' && {'background-color' : 'red'}">{{answer}}</div>

假设： {{answer}} 设置为评估的值（答案是好或否）。

编辑： 对于样式条件，它需要在您的控制器中设置，如果答案不能在条件测试中使用。看起来你有一个对象 btn0，每个对象都可以有一个属性 (btn0.isGood)，可以在 evalAnswer(answer, btn0) 点击事件中设置，并导致样式发生变化。