diff --git a/src/directives.js b/src/directives.js index e9b678f8c326..eb35addb1494 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 diff --git a/test/directivesSpec.js b/test/directivesSpec.js index 7600a9c8a855..e52d9fcb15ca 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( + '
' + + '
')($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('
')($rootScope); $rootScope.$digest();