ng-class
是核心 AngularJs 的指令。您可以在其中使用“字符串语法”、“数组语法”、“评估表达式”、“三元运算符”和下面描述的更多选项:
ngClass 使用字符串语法
这是使用 ngClass 最简单的方法。您可以只向 ng-class 添加一个 Angular 变量,这就是将用于该元素的类。
<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">
<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!
使用字符串语法的 ngClass演示示例
ngClass 使用数组语法
这类似于字符串语法方法,只是您可以应用多个类。
<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!
ngClass 使用评估表达式
使用 ngClass 的一种更高级的方法(您可能会使用最多的方法)是评估表达式。其工作方式是,如果变量或表达式的计算结果为true
,您可以应用某个类。如果没有,那么该课程将不会被应用。
<!-- 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 }">
使用评估表达式的 ngClass示例
ngClass 使用值
这类似于评估表达式方法,只是您只能将多个值与唯一变量进行比较。
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass 使用三元运算符
三元运算符允许我们使用速记来指定两个不同的类,一个表示表达式为真,一个表示假。以下是三元运算符的基本语法:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
评估第一个、最后一个或特定数字
如果您正在使用该ngRepeat
指令并且希望将类应用于first
、last
或列表中的特定数字,则可以使用 的特殊属性ngRepeat
。其中包括$first
, $last
, $even
,$odd
和其他一些。这是一个如何使用这些的示例。
<!-- add a class to the first item -->
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the last item -->
<ul>
<li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the even items and a different class to the odd items -->
<ul>
<li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>