三类 ng-ng 表达式

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 定义。它将把“bold-red”，deleted 和 error 三个类应用于 <span> 元素。

以这种方式指定类可以让你轻松更改控制器中的类定义。例如，你可能需要根据其他用户交互或从服务器加载的新数据更改类。此外，如果要评估很多表达式，可以在定义 $scope 变量中类的最终列表的函数中执行此操作。这比尝试将许多评估压缩到 HTML 模板中的 ng-class 属性更容易。

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>

这将创建一个绑定到范围变量 UserStyle 的文本输入字段，该字段允许用户键入任何类名。这些将在用户输入时动态应用于 <p> 元素。此外，用户可以单击与 warning 范围变量数据绑定的复选框。这也将动态应用于 <p> 元素。