diff options
| -rw-r--r-- | src/directives.js | 7 | ||||
| -rw-r--r-- | test/directivesSpec.js | 22 |
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(); |