©
Dieses Dokument verwendetPHP-Handbuch für chinesische WebsitesFreigeben
ngClass
指令允许你动态设置HTML元素的CSS类,通过绑定到一个包含要添加的所有类的表达式。
这个指令有三种使用方式,这三种方式取决于表达式计算结果:
如果表达式结果为字符串,则字符串为使用空格分隔的一个或多个类名。
如果表达式结果为一个数组,则数组中每个元素为使用空格分隔的一个或多个类名字符串。
这个指令不会添加重复的类,如果这个类已经存在的话。
当表达式改变时,以前添加的类会被移除,并且只会添加之后新产生的类。
ng-class="">...
class="ng-class: ;">...
add - 在类被应用到元素前发生
remove - 在类从元素移除前发生
点击这里 了解更多关于涉及动画的步骤。参数 | 类型 | 详述 |
---|---|---|
ngClass | expression | 用于计算的表达式。 计算结果可以为使用空格分隔的类名字符串、数组,或布尔值的类名映射(map)表。如果是映射表,那些值为真的属性名称将作为css类添加到元素上。 |
下面演示使用ngClass指令的一些基本绑定用法。
ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example
Type="checkbox"ng-model="deleted">deleted (apply "strike" class)
Type="checkbox"ng-model="important">important (apply "bold" class)
Type="checkbox"ng-model="error">error (apply "red" class)
ng-class="style">Using String Syntax
Type="text"ng-model="style"placeholder="Type: bold strike red">
ng-class="[style1, style2, style3]">Using Array Syntax
ng-model="style1"placeholder="Type: bold, strike or red">
ng-model="style2"placeholder="Type: bold, strike or red">
ng-model="style3"placeholder="Type: bold, strike or red">
style.css
.strike{text-decoration:line-through;}.bold{font-weight:bold;}.red{color:red;}
varps=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来操作动画。
id="setbtn"Type="button"value="set"ng-click="myVar='my-class'">id="clearbtn"Type="button"value="clear"ng-click="myVar=''">
class="base-class"ng-class="myVar">Sample Text
.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。