From f78b559816c4f74ebd01fc29c1956a1693ddf693 Mon Sep 17 00:00:00 2001 From: frederikprijck Date: Mon, 30 Jan 2017 22:46:22 +0100 Subject: [PATCH 1/2] docs(ngClass): add docs regarding animation for `ngClassEven` and `ngClassOdd` Previously, the documentation has no information regarding using `ngAnimate` together with the `ngClassEven` and `ngClassOdd` directives. This commit adds the same docs used by the `ngClass` directive to the `ngClassEven` and `ngClassOdd` docs and adds an extra example for both `ngClassEven` and `ngClassOdd` that showcases animations. --- src/ng/directive/ngClass.js | 102 ++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index e38c7c141938..2de1f8c487f2 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -338,6 +338,12 @@ var ngClassDirective = classDirective('', true); * This directive can be applied only within the scope of an * {@link ng.directive:ngRepeat ngRepeat}. * + * @animations + * | Animation | Occurs | + * |----------------------------------|-------------------------------------| + * | {@link ng.$animate#addClass addClass} | just before the class is applied to the element | + * | {@link ng.$animate#removeClass removeClass} | just before the class is removed from the element | + * * @element ANY * @param {expression} ngClassOdd {@link guide/expression Expression} to eval. The result * of the evaluation can be a string representing space delimited class names or an array. @@ -370,6 +376,51 @@ var ngClassDirective = classDirective('', true); }); + * + *
+ * @example + * An example on how to implement animations using ngClassOdd: + * + + +
    +
  1. + + {{name}} + +
    2. +
+ + + + span { + color: #000000; + } + span.odd { + color: #ff0000; + font-size:3em; + } + span.odd-add, + span.odd-remove { + transition: linear 0.5s; + } + + + it('should not have odd class by default', function() { + expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')).not. + toMatch(/odd/); + }); + + it('should have odd class when button was clicked', function() { + var button = element(by.css('button')); + + button.click(); + + expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')). + toMatch(/odd/); + }); + + */ var ngClassOddDirective = classDirective('Odd', 0); @@ -386,6 +437,12 @@ var ngClassOddDirective = classDirective('Odd', 0); * This directive can be applied only within the scope of an * {@link ng.directive:ngRepeat ngRepeat}. * + * @animations + * | Animation | Occurs | + * |----------------------------------|-------------------------------------| + * | {@link ng.$animate#addClass addClass} | just before the class is applied to the element | + * | {@link ng.$animate#removeClass removeClass} | just before the class is removed from the element | + * * @element ANY * @param {expression} ngClassEven {@link guide/expression Expression} to eval. The * result of the evaluation can be a string representing space delimited class names or an array. @@ -418,5 +475,50 @@ var ngClassOddDirective = classDirective('Odd', 0); }); + * + *
+ * @example + * An example on how to implement animations using ngClassEven: + * + + +
    +
  1. + + {{name}} + +
    2. +
+ + + + span { + color: #000000; + } + span.even { + color: #0000ff; + font-size:3em; + } + span.even-add, + span.even-remove { + transition: linear 0.5s; + } + + + it('should not have even class by default', function() { + expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')).not. + toMatch(/even/); + }); + + it('should have even class when button was clicked', function() { + var button = element(by.css('button')); + + button.click(); + + expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')). + toMatch(/even/); + }); + + */ var ngClassEvenDirective = classDirective('Even', 1); From ffec176fd8d00291552e3bf3a9f8b12ef1cbbc29 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 6 Feb 2018 14:51:10 +0200 Subject: [PATCH 2/2] fixup! docs(ngClass): add docs regarding animation for `ngClassEven` and `ngClassOdd` --- docs/content/guide/animations.ngdoc | 7 +- src/ng/directive/ngClass.js | 130 ++++++++++++++++------------ 2 files changed, 80 insertions(+), 57 deletions(-) diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc index a13661a36a68..22e4df094839 100644 --- a/docs/content/guide/animations.ngdoc +++ b/docs/content/guide/animations.ngdoc @@ -229,11 +229,12 @@ triggered: | {@link ngRoute.directive:ngView#animations ngView} | enter and leave | | {@link module:ngMessages#animations ngMessage / ngMessageExp} | enter and leave | | {@link ng.directive:ngClass#animations ngClass / {{class}​}} | add and remove | -| {@link ng.directive:ngClass#animations ngClassEven / ngClassOdd} | add and remove | +| {@link ng.directive:ngClassEven#animations ngClassEven} | add and remove | +| {@link ng.directive:ngClassOdd#animations ngClassOdd} | add and remove | | {@link ng.directive:ngHide#animations ngHide} | add and remove (the `ng-hide` class) | | {@link ng.directive:ngShow#animations ngShow} | add and remove (the `ng-hide` class) | -| {@link ng.directive:ngModel#animations ngModel} | add and remove ({@link ng.directive:ngModel#css-classes various classes}) | -| {@link ng.directive:form#animations form / ngForm} | add and remove ({@link ng.directive:form#css-classes various classes}) | +| {@link ng.directive:ngModel#animations ngModel} | add and remove ({@link ng.directive:ngModel#css-classes various classes}) | +| {@link ng.directive:form#animations form / ngForm} | add and remove ({@link ng.directive:form#css-classes various classes}) | | {@link module:ngMessages#animations ngMessages} | add and remove (the `ng-active`/`ng-inactive` classes) | For a full breakdown of the steps involved during each animation event, refer to the diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 2de1f8c487f2..7b1ca13b2915 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -377,47 +377,58 @@ var ngClassDirective = classDirective('', true); * - *
+ *
* @example - * An example on how to implement animations using ngClassOdd: + * An example on how to implement animations using `ngClassOdd`: * -
    -
  1. - - {{name}} - -
    2. -
- +
+ +
+ + + + +
{{ item }}
+
- span { - color: #000000; + .odd { + background: rgba(255, 255, 0, 0.25); } - span.odd { - color: #ff0000; - font-size:3em; + + .odd-add, .odd-remove { + transition: 1.5s; } - span.odd-add, - span.odd-remove { - transition: linear 0.5s; - } - it('should not have odd class by default', function() { - expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')).not. - toMatch(/odd/); + it('should add new entries to the beginning of the list', function() { + var button = element(by.buttonText('Add item')); + var rows = element.all(by.repeater('item in items')); + + expect(rows.count()).toBe(4); + expect(rows.get(0).getText()).toBe('Item 3'); + expect(rows.get(1).getText()).toBe('Item 2'); + + button.click(); + + expect(rows.count()).toBe(5); + expect(rows.get(0).getText()).toBe('Item 4'); + expect(rows.get(1).getText()).toBe('Item 3'); }); - it('should have odd class when button was clicked', function() { - var button = element(by.css('button')); + it('should add odd class to odd entries', function() { + var button = element(by.buttonText('Add item')); + var rows = element.all(by.repeater('item in items')); - button.click(); + expect(rows.get(0).getAttribute('class')).toMatch(/odd/); + expect(rows.get(1).getAttribute('class')).not.toMatch(/odd/); - expect(element(by.repeater('name in names').row(0).column('name')).getAttribute('class')). - toMatch(/odd/); + button.click(); + + expect(rows.get(0).getAttribute('class')).toMatch(/odd/); + expect(rows.get(1).getAttribute('class')).not.toMatch(/odd/); }); @@ -476,47 +487,58 @@ var ngClassOddDirective = classDirective('Odd', 0); * - *
+ *
* @example - * An example on how to implement animations using ngClassEven: + * An example on how to implement animations using `ngClassEven`: * -
    -
  1. - - {{name}} - -
    2. -
- +
+ +
+ + + + +
{{ item }}
+
- span { - color: #000000; - } - span.even { - color: #0000ff; - font-size:3em; + .even { + background: rgba(255, 255, 0, 0.25); } - span.even-add, - span.even-remove { - transition: linear 0.5s; + + .even-add, .even-remove { + transition: 1.5s; } - it('should not have even class by default', function() { - expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')).not. - toMatch(/even/); + it('should add new entries to the beginning of the list', function() { + var button = element(by.buttonText('Add item')); + var rows = element.all(by.repeater('item in items')); + + expect(rows.count()).toBe(4); + expect(rows.get(0).getText()).toBe('Item 3'); + expect(rows.get(1).getText()).toBe('Item 2'); + + button.click(); + + expect(rows.count()).toBe(5); + expect(rows.get(0).getText()).toBe('Item 4'); + expect(rows.get(1).getText()).toBe('Item 3'); }); - it('should have even class when button was clicked', function() { - var button = element(by.css('button')); + it('should add even class to even entries', function() { + var button = element(by.buttonText('Add item')); + var rows = element.all(by.repeater('item in items')); - button.click(); + expect(rows.get(0).getAttribute('class')).not.toMatch(/even/); + expect(rows.get(1).getAttribute('class')).toMatch(/even/); - expect(element(by.repeater('name in names').row(1).column('name')).getAttribute('class')). - toMatch(/even/); + button.click(); + + expect(rows.get(0).getAttribute('class')).not.toMatch(/even/); + expect(rows.get(1).getAttribute('class')).toMatch(/even/); });