diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 38b804b5..db6e7ac8 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -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. + + +

Map Syntax Example

+ bold + strike + red +
+

Using String Syntax

+ +
+

Using Array Syntax

+
+
+
+
+ + .strike { + text-decoration: line-through; + } + .bold { + font-weight: bold; + } + .red { + color: red; + } + + + 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'); + }); + +
+ + ## Animations + + Example that demostrates how addition and removal of classes can be animated. +