mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-09 23:34:42 +00:00
feat(ng:class): support using map of classnames and conditions
enables <div ng:class="{'hide': !visible, 'warning': isAlert()}"...
This commit is contained in:
parent
b2052d08a1
commit
56bcc04c54
2 changed files with 28 additions and 1 deletions
|
|
@ -527,8 +527,12 @@ function ngClass(selector) {
|
||||||
scope.$watch(expression, function(newVal, oldVal) {
|
scope.$watch(expression, function(newVal, oldVal) {
|
||||||
if (selector(scope.$index)) {
|
if (selector(scope.$index)) {
|
||||||
if (oldVal && (newVal !== oldVal)) {
|
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);
|
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);
|
if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -551,7 +555,8 @@ function ngClass(selector) {
|
||||||
*
|
*
|
||||||
* @element ANY
|
* @element ANY
|
||||||
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
|
* @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
|
* @example
|
||||||
<doc:example>
|
<doc:example>
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
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);
|
var element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
|
||||||
$rootScope.$digest();
|
$rootScope.$digest();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue