fix(ngClass) when reversing the orderByFilter ngClassOdd and ngClassE…

…ven is not updated. Issue angular#1563 fix. Put back in place the original fix issue angular#1076
rgaskill · Nov 13, 2012 · 30516b7 · 30516b7
1 parent 19a324c
commit 30516b7
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 7 deletions.
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
@@ -7,21 +7,46 @@ function classDirective(name, selector) {
     function ngClassWatchAction(newVal, oldVal) {
       if (selector === true || scope.$index % 2 === selector) {
         if (oldVal && (newVal !== oldVal)) {
-          if (isObject(oldVal) && !isArray(oldVal))
-            oldVal = map(oldVal, function(v, k) { if (v) return k });
-          element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal);
+          removeClass(oldVal);
         }
-        if (isObject(newVal) && !isArray(newVal))
-          newVal = map(newVal, function(v, k) { if (v) return k });
-        if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);
+        addClass(newVal);
       }
     };
-    scope.$watch(attr[name], ngClassWatchAction, true);
+
+    function removeClass(classVal) {
+      if (isObject(classVal) && !isArray(classVal))
+             classVal = map(classVal, function(v, k) { if (v) return k });
+           element.removeClass(isArray(classVal) ? classVal.join(' ') : classVal);
+    }
+
+    function addClass(classVal) {
+      if (isObject(classVal) && !isArray(classVal))
+            classVal = map(classVal, function(v, k) { if (v) return k });
+      if (classVal) element.addClass(isArray(classVal) ? classVal.join(' ') : classVal);
+    }
+
+    scope.$watch(attr[name], ngClassWatchAction, true);  
+
+    function indexWatch(newVal, oldVal){
+        if (newVal !== oldVal && ((newVal + oldVal) % 2 === 1)) {          
+          if (newVal % 2 !== selector) {
+            removeClass(scope.$eval(attr[name]));
+          } else {
+            addClass(scope.$eval(attr[name]));
+          }
+        }
+    };
+
+    if(selector !== true) {
+      indexWatch(scope.$index);
+      scope.$watch("$index", indexWatch, true);
+    }  
 
     attr.$observe('class', function(value) {
       var ngClass = scope.$eval(attr[name]);
       ngClassWatchAction(ngClass, ngClass);
     });
+
   });
 }
 

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
@@ -278,4 +278,31 @@ describe('ngClass', function() {
     expect(e2.hasClass('even')).toBeTruthy();
     expect(e2.hasClass('odd')).toBeFalsy();
   }));
+
+
+  it('should ngClass odd/even with orderBy direction change', inject(function($rootScope, $compile) {
+    element = $compile('<ul><li ng-repeat="i in values | orderBy:sort.column:sort.desc" class="existing" ng-class-odd="\'odd\'" ng-class-even="\'even\'">{{i.val}}</li><ul>')($rootScope);
+    $rootScope.values = [{val: 0},{val: 1}];
+    $rootScope.sort = {column: 'val', desc: false};
+    $rootScope.$digest();
+
+    var e1 = jqLite(element[0].childNodes[1]);
+    var e2 = jqLite(element[0].childNodes[2]);
+    expect(e1.text()).toBe('0');
+    expect(e1.hasClass('existing')).toBeTruthy();
+    expect(e1.hasClass('odd')).toBeTruthy();
+    expect(e2.hasClass('existing')).toBeTruthy();
+    expect(e2.hasClass('even')).toBeTruthy();
+
+    $rootScope.sort.desc = true;
+    $rootScope.$digest();
+
+    e1 = jqLite(element[0].childNodes[1]);
+    e2 = jqLite(element[0].childNodes[2]);
+    expect(e1.text()).toBe('1');
+    expect(e1.hasClass('existing')).toBeTruthy();
+    expect(e1.hasClass('odd')).toBeTruthy();
+    expect(e2.hasClass('existing')).toBeTruthy();
+    expect(e2.hasClass('even')).toBeTruthy();
+  }));
 });