AngularJS：应用类取决于变量

Question

我有一个对象数组，每个对象都有一个颜色变量（'success'，'danger'，'info'）。我必须在面板，文本和按钮上应用它们，就像那样：

<div class="panel" ng-class="panel-{{panel.color}}"></div>
<button class="btn" ng-class="btn-{{panel.color}}"></div>
<p ng-class="text-{{panel.color}}"></p>

当然，这个解决方案不起作用。

Answer 1

1。为什么它不起作用？

此代码ng-class="panel-{{panel.color}}"无效的原因是您混淆ng-class指令，该指令接受没有双花括号的变量名称和需要双花括号的class属性围绕变量名称。

2。如何解决？

有两种方法可以做到：

ng-class的一种方式：

<span ng-class="'panel-'+panel.color">panel {{panel.color}}</span>

另一个class：

<span class="panel-{{panel.color}}">panel {{panel.color}}</span>

JsFiddle

3。 ngClass指令非常方便

有很多种方法可以使用ngClass。

您可以传递一个类名数组：

<span ng-class="['panel-'+panel.color, 'panel-'+panel.primary]">panel </span>

或者您可以有条件地添加课程：

<span ng-class="{'panel-red' : panel.isRed, 'panel-primary': panel.isPrimary}">panel</span>

或者使用三元运算符：

<span ng-class="panel.isRed ? 'panel-red' : 'panel-not-red'">panel</span>

Answer 2

你需要像这样使用ngClass：

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

或

ng-class="x > 4 ? 'success' : 'danger'">

而不是x＆gt; 4把你的条件

在这里你可以找到很多真实的例子： https://scotch.io/tutorials/the-many-ways-to-use-ngclass