在angular中为我们提供了3种方案处理class:
1.scope变量绑定(不推荐使用)
controller代码
javascript
function ctr($scope){ $scope.test =“classname”; }
html代码
html
<div class=”{{test}}”></div>
这种方法是没错的,但是它又angular提供变量来改变class的方法有点诡异至少我认为controller应该是纯净的数据和行为
2.字符串数组形式
javascript
function Ctr($scope) { $scope.isActive = true; }
html
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"> </div>
isActive表达式为true,则 active,否则inactive。
3.对象key/value处理
主要针对复杂的class混合
javascript
function Ctr($scope) { $scope.isSelected = true; $scope.isCar = false; }
html
<div ng-class {'selected': isSelected, 'car': isCar}"> </div>
当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。
个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁,scope上的只能是数据和行为。
文章原创链接 : http://www.devh.net/u/yidongnan/blog/how-to-user-ngclass-in-angularjs