AngularJS - 3种方案处理class

最新推荐文章于 2023-04-28 14:19:43 发布

henry1213

最新推荐文章于 2023-04-28 14:19:43 发布

阅读量679

点赞数

分类专栏： angularjs class 文章标签： angularjs class

class 同时被 2 个专栏收录

1 篇文章

订阅专栏

angularjs

0 篇文章

订阅专栏

本文介绍了Angular中处理元素class的三种方法：scope变量绑定（不推荐）、字符串数组形式和对象key/value处理。重点推荐使用对象key/value处理，适用于复杂的class混合场景，并解释了为何避免将class直接放在controller的scope上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

From: http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

在angular中为我们提供了3种方案处理class：

scope变量绑定，如上例。（不推荐使用）
字符串数组形式。
对象key/value处理。

1. scope变量绑定，如下例。（不推荐使用）

function ctr($scope){
   $scope.test =“classname”;
}
<div class=”{{test}}”></div>

2. 对象key/value处理主要针对复杂的class混合，其形如：

function Ctr($scope) { }
<div ng-class {'selected': isSelected, 'car': isCar}"></div>

当 isSelected = true 则增加selected class，当isCar=true,则增加car class，所以你结果可能是4种组合。

个人推荐用2，3两种方式，不建议将class放入controller scope之上，scope需要保持纯洁行，scope上的只能是数据和行为。