Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
feat(ng:class): support using map of classnames and conditions
Browse files Browse the repository at this point in the history
enables <div ng:class="{'hide': !visible, 'warning': isAlert()}"...
  • Loading branch information
groner authored and IgorMinar committed Jan 24, 2012
1 parent b2052d0 commit 56bcc04
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/directives.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
Expand All @@ -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>
Expand Down
22 changes: 22 additions & 0 deletions test/directivesSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit 56bcc04

Please sign in to comment.