ng-class
是AngularJS预设的一个指令,用于动态自定义dom元素的css class name,下面是其官网的api doc, AngularJS:ngClass
ng-class
在实际的应用场景中还是比较灵活的,而在AngularJS中一般有三种方式给元素的class属性做一些门道,如下
scope变量绑定(不推荐使用)
<!-- lang: js -->
function ctr($scope){
$scope.test =“classname”;
}
<div class=”{{test}}”></div>
说明
这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。
字符串数组形式
<!-- lang: js -->
function Ctr($scope) {
$scope.isActive = true;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
说明
其结果是2中组合,isActive表达式为true,则 active,负责inactive。
对象key/value处理
<!-- lang: js -->
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}"></div>
说明
当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。
参考