AngularJS 三种类型的ng-class表达式
示例
Angular在ng-class指令中支持三种类型的表达式。
1.字符串
<span ng-class="MyClass">Sample Text</span>
指定一个计算结果为字符串的表达式，告诉Angular将其视为$scope变量。Angular将检查$scope并寻找一个名为“MyClass”的变量。无论“MyClass”中包含什么文本，都将成为应用于此的实际类名<span>。您可以通过用空格分隔每个类来指定多个类。
在您的控制器中，您可能具有如下所示的定义：
$scope.MyClass = "bold-red deleted error";
Angular将评估表达式MyClass并找到$scope定义。它将对<span>元素应用三个类别“bold-red”，“deleted”和“error”。
通过这种方式指定类，可以轻松更改控制器中的类定义。例如，您可能需要根据其他用户交互或从服务器加载的新数据来更改类。另外，如果您有很多要评估的表达式，则可以在定义$scope变量中类的最终列表的函数中进行。这比将许多求值压缩到ng-classHTML模板中的属性要容易得多。
2.对象
这是使用定义类的最常用方法，ng-class因为它可以轻松让您指定确定使用哪个类的评估。
指定一个包含键值对的对象。关键字是如果值（条件值）评估为true时将应用的类名称。
<style>
.red { color: red; font-weight: bold; }
.blue { color: blue; }
.green { color: green; }
.highlighted { background-color: yellow; color: black; }
</style>
<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>
<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>3.数组
计算结果为数组的表达式可让您使用字符串（请参阅上面的＃1）和条件对象（上面的＃2）的组合。
<style>
.bold { font-weight: bold; }
.strike { text-decoration: line-through; }
.orange { color: orange; }
</style>
<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>这将创建一个绑定到scope变量的文本输入字段，该字段UserStyle允许用户键入任何类name(s)。这些将<p>作为用户类型动态地应用于元素。同样，用户可以单击与warning范围变量数据绑定的复选框。这也将动态地应用于<p>元素。