ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css class name
ng-class在实际的应用场景中还是比较灵活的,而在AngularJS中一般有三种方式给元素的class属性做一些门道,如下
1.scope变量绑定(不推荐使用)
function controller($scope){
$scope.test =“classname”;
}
<div class=”{{test}}”></div>
不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。
2.字符串数组形式
function controller($scope) {
$scope.isActive = true;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
其结果是两中组合,若isActive表达式为true,则 active,否则inactive。
3.对象key/value处理
function controller($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}"></div>
当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。