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>

在控制器端，我有一个功能，点击后，查看答案并返回＆＃34; good＆＃34;如果答案是正确的，那么＆＃34; nope＆＃34;如果答案不好。

我想要的是在这些良好和不流行的状态下添加按钮样式，以便在答案为no的情况下按钮变为红色，如果它是好的答案则为绿色。我已经创建了这个类，我只需要更改＆＃34; button-default＆＃34;到＆＃34;按钮好＆＃34;或＆＃34;按钮错误＆＃34;。此外，它只需要更改单击的按钮。

有关于这样做的任何想法吗？

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）点击事件中设置，并且会导致更改样式。

根据状态angularjs更改按钮样式

2 个答案: