NgClassDirective class
The ngClass
allows you to set CSS classes on HTML an element, dynamically,
by databinding an expression that represents all classes to be added.
The directive won't add duplicate classes if a particular class was already set.
When the expression changes, the previously added classes are removed and only then the new classes are added.
The result of the expression evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.
Examples
index.html:
<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
<input type="checkbox" ng-model="bold"> bold
<input type="checkbox" ng-model="strike"> strike
<input type="checkbox" ng-model="red"> red
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold"><br>
<input ng-model="style2" placeholder="Type: strike"><br>
<input ng-model="style3" placeholder="Type: red"><br>
style.css:
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
@NgDirective( selector: '[ng-class]', map: const {'ng-class': '@valueExpression'}) class NgClassDirective extends _NgClassBase { NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs) : super(element, scope, null, attrs); }
Extends
_NgClassBase > NgClassDirective
Properties
dynamic set valueExpression(currentExpression) #
inherited from _NgClassBase
set valueExpression(currentExpression) { // this should be called only once, so we don't worry about cleaning up // watcher registrations. scope.$watchCollection(currentExpression, (current) { currentSet = _flatten(current); _handleChange(scope[r'$index']); }); if (mode != null) { scope.$watch(r'$index', (index, oldIndex) { var mod = index % 2; if (oldIndex == null || mod != oldIndex % 2) { if (mod == mode) { element.classes.addAll(currentSet); } else { element.classes.removeAll(previousSet); } } }); } }