feat(ng:class): support using map of classnames and conditions

enables <div ng:class="{'hide': !visible, 'warning': isAlert()}"...

2 files changed, 28 insertions, 1 deletions

diff --git a/src/directives.js b/src/directives.js
index e9b678f8..eb35addb 100644
--- a/src/directives.js
+++ b/src/directives.js
@@ -527,8 +527,12 @@ function ngClass(selector) {
       scope.$watch(expression, function(newVal, oldVal) {
         if (selector(scope.$index)) {
           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);
           }
+          if (isObject(newVal) && !isArray(newVal))
+            newVal = map(newVal, function(v, k) { if (v) return k });
           if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);
         }
       });
@@ -551,7 +555,8 @@ function ngClass(selector) {
  *
  * @element ANY
  * @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
- *   of the evaluation can be a string representing space delimited class names or an array.
+ *   of the evaluation can be a string representing space delimited class
+ *   names, an array, or a map of class names to boolean values.
  *
  * @example
    <doc:example>
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
index 7600a9c8..e52d9fcb 100644
--- a/test/directivesSpec.js
+++ b/test/directivesSpec.js
@@ -200,6 +200,28 @@ describe("directive", function() {
     }));
 
 
+    it('should support adding multiple classes conditionally via a map of class names to boolean' +
+        'expressions', inject(function($rootScope, $compile) {
+      var element = $compile(
+          '<div class="existing" ' +
+              'ng:class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' +
+          '</div>')($rootScope);
+      $rootScope.conditionA = true;
+      $rootScope.$digest();
+      expect(element.hasClass('existing')).toBeTruthy();
+      expect(element.hasClass('A')).toBeTruthy();
+      expect(element.hasClass('B')).toBeFalsy();
+      expect(element.hasClass('AnotB')).toBeTruthy();
+
+      $rootScope.conditionB = function() { return true };
+      $rootScope.$digest();
+      expect(element.hasClass('existing')).toBeTruthy();
+      expect(element.hasClass('A')).toBeTruthy();
+      expect(element.hasClass('B')).toBeTruthy();
+      expect(element.hasClass('AnotB')).toBeFalsy();
+    }));
+
+
     it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
       var element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
       $rootScope.$digest();