AngularJS: API: ng/directive/ngClass

ngClass

- directive in module ng

ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。

这个指令有三种使用方式，这三种方式取决于表达式计算结果：

如果表达式结果为字符串，则字符串为使用空格分隔的一个或多个类名。
如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。
如果表达式结果为一个对象，对象中的每个key-value中如果键值为真时则键名作为类名。

这个指令不会添加重复的类，如果这个类已经存在的话。

当表达式改变时，以前添加的类会被移除，并且只会添加之后新产生的类。

指令信息

这个指令执行优先级为0.

用法

作为属性使用:
```
<ANY
  ng-class="">
...
</ANY>
```
作为CSS类使用:
```
<ANY class="ng-class: ;"> ... </ANY>
```

动画

add - 在类被应用到元素前发生

remove - 在类从元素移除前发生

点击这里了解更多关于涉及动画的步骤。

参数

参数	类型	详述
ngClass	expression	用于计算的表达式。计算结果可以为使用空格分隔的类名字符串、数组，或布尔值的类名映射(map)表。如果是映射表，那些值为真的属性名称将作为css类添加到元素上。

示例

下面演示使用ngClass指令的一些基本绑定用法。

index.html

<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>

style.css

.strike {
  text-decoration: line-through;}.bold {
    font-weight: bold;}.red {
    color: red;}

protractor.js

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来操作动画。