项目内想到要替换class时,第一反应是使用angular最为简单粗暴的class改变方式;
在angular中为我们提供了3种方案处理class:
1:scope变量绑定,如上例。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。
1.scope变量绑定
$scope.test =“classname”;
<div class=”{{test}}”></div>
这种方式虽然可以,但是在controller中出现了class总是显得奇怪,在angular的思想里面controller应该保持纯洁的js。
2.字符串数组形式。
当isActive=true时,class是active,isActive=false时为空,
$scope.isActive = true;
<div ng-class="{true: ‘active‘, false: ‘‘}[isActive]"> </div>
3.对象key/value处理主要针对复杂的class混合。
当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。
$scope.isSelected=true;
<div ng-class {‘selected‘: isSelected, ‘car‘: isCar}"> </div>
当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。
个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。
时间: 2024-10-11 08:58:51