©
This document uses PHP Chinese website manual Release
ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。
这个指令有三种使用方式，这三种方式取决于表达式计算结果：
如果表达式结果为字符串，则字符串为使用空格分隔的一个或多个类名。
如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。
这个指令不会添加重复的类，如果这个类已经存在的话。
当表达式改变时，以前添加的类会被移除，并且只会添加之后新产生的类。
<ANY
ng-class="">
...
</ANY><ANY class="ng-class: ;"> ... </ANY>add - 在类被应用到元素前发生
remove - 在类从元素移除前发生
点击这里 了解更多关于涉及动画的步骤。| 参数 | 类型 | 详述 |
|---|---|---|
| ngClass | expression | 用于计算的表达式。 计算结果可以为使用空格分隔的类名字符串、数组，或布尔值的类名映射(map)表。如果是映射表，那些值为真的属性名称将作为css类添加到元素上。 |
下面演示使用ngClass指令的一些基本绑定用法。
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input Type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input Type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input Type="checkbox" ng-model="error"> error (apply "red" class)<hr>
<p ng-class="style">Using String Syntax</p>
<input Type="text" ng-model="style" placeholder="Type: bold strike red"><hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>.strike {
text-decoration: line-through;}.bold {
font-weight: bold;}.red {
color: red;}var ps = element.all(by.css('p'));
it('should let you toggle the class', Function() {
expect(ps.first().getAttribute('class')).not.toMatch(/bold/);
expect(ps.first().getAttribute('class')).not.toMatch(/red/);
element(by.model('important')).click();
expect(ps.first().getAttribute('class')).toMatch(/bold/);
element(by.model('error')).click();
expect(ps.first().getAttribute('class')).toMatch(/red/);});
it('should let you toggle string example', Function() {
expect(ps.get(1).getAttribute('class')).toBe('');
element(by.model('style')).clear();
element(by.model('style')).sendKeys('red');
expect(ps.get(1).getAttribute('class')).toBe('red');});
it('array example should have 3 classes', Function() {
expect(ps.last().getAttribute('class')).toBe('');
element(by.model('style1')).sendKeys('bold');
element(by.model('style2')).sendKeys('strike');
element(by.model('style3')).sendKeys('red');
expect(ps.last().getAttribute('class')).toBe('bold strike red');});下面的例子演示使用ngClass来操作动画。
<input id="setbtn" Type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" Type="button" value="clear" ng-click="myVar=''"><br>
<span class="base-class" ng-class="myVar">Sample Text</span>.base-class {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;}
.base-class.my-class {
color: red;
font-size:3em;}it('should check ng-class', Function() {
expect(element(by.css('.base-class')).getAttribute('class')).not.
toMatch(/my-class/);
element(by.id('setbtn')).click();
expect(element(by.css('.base-class')).getAttribute('class')).
toMatch(/my-class/);
element(by.id('clearbtn')).click();
expect(element(by.css('.base-class')).getAttribute('class')).not.
toMatch(/my-class/);});ngClass指令仍然支持CSS3 Transitions/Animations 事件上，如果它们不遵从ngAnimate CSS 命名结构的话。在动画阶段，ngAnimate将用于辅助CSS类来跟踪动画的开始和结束。但这并不妨碍任何元素上已经存在的CSS转换。要想了解基于类的动画过程中发生了什么，可参见 $animate.addClass 和 $animate.removeClass。