Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-28 20:10:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(ngClass): updated the example with string, map and array syntax

Browse source 
Closes #3084
This commit is contained in:
Jamund Ferguson 2013-06-27 16:18:00 -07:00 committed by Igor Minar
parent 7f14cdeeb5
commit 66007a4150
1 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/ng/directive/ngClass.js
View file

@ -93,7 +93,66 @@ function classDirective(name, selector) {
* names of the properties whose values are truthy will be added as css classes to the
* element.
*
* @example
* @example Example that demostrates basic bindings via ngClass directive.
<example>
<file name="index.html">
<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
<input type="checkbox" ng-model="bold"> bold
<input type="checkbox" ng-model="strike"> strike
<input type="checkbox" ng-model="red"> red
<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"><br>
<input ng-model="style2" placeholder="Type: strike"><br>
<input ng-model="style3" placeholder="Type: red"><br>
</file>
<file name="style.css">
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
</file>
<file name="scenario.js">
it('should let you toggle the class', function() {
expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/bold/);
expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/red/);
input('bold').check();
expect(element('.doc-example-live p:first').prop('className')).toMatch(/bold/);
input('red').check();
expect(element('.doc-example-live p:first').prop('className')).toMatch(/red/);
});
it('should let you toggle string example', function() {
expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('');
input('style').enter('red');
expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('red');
});
it('array example should have 3 classes', function() {
expect(element('.doc-example-live p:last').prop('className')).toBe('');
input('style1').enter('bold');
input('style2').enter('strike');
input('style3').enter('red');
expect(element('.doc-example-live p:last').prop('className')).toBe('bold strike red');
});
</file>
</example>
## Animations
Example that demostrates how addition and removal of classes can be animated.
<example animations="true">
<file name="index.html">
<input type="button" value="set" ng-click="myVar='my-class'">