在 AngularJS 中，我们通常使用 ng-class 指令设置单个 CSS 类。然而，在某些情况下（例如，当我们需要切换多个 CSS 类时），我们需要使用 ng-class 指令设置多个 CSS 类。本文将教你如何使用 ng-class 指令实现这个目标。
什么是 ng-class 指令？
ng-class 指令用于动态地设置 HTML 元素的 CSS 类。你可以使用该指令设置单个 CSS 类或多个 CSS 类。ng-class 指令使用一个表达式来判断要添加的 CSS 类名。当表达式的值为 true 时，该 CSS 类被添加到元素上。
下面是一个简单的 ng-class 指令的例子：
<div ng-class="{ active: isActive }"></div>上面的代码将添加名为“active”的 CSS 类到该 div 元素，当 isActive 为 true 时。你可以在控制器中使用 isActive 变量来控制该 CSS 类是否加入。
如何设置多个 CSS 类？
如果我们要设置多个 CSS 类，我们可以使用以下这种格式：
<div ng-class="{'class1 class2 class3': condition}"></div>在上面的代码中，class1、class2 和 class3 是我们要添加的 CSS 类的名称。我们可以在 condition 变量的控制下添加这些类。当 condition 的值为 true 时，这些 CSS 类被添加到元素上。
这种方式看起来很麻烦，因为你需要手动添加空格以区分每个 CSS 类。为了更好地管理 CSS 类，我们可以使用以下这种格式：
<div ng-class="{'class1': condition1, 'class2': condition2, 'class3': condition3}"></div>在这种情况下，我们将每个 CSS 类都放在一个单独的引号中，并用逗号分隔。每个 CSS 类都有一个对应的条件变量。当条件变量的值为 true 时，对应的 CSS 类被添加到元素上。
示例代码
下面是一个使用 ng-class 指令设置多个 CSS 类的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------------ -------- --------- - -------------------- ----- --------- ----- ------------- ----- ----------- ----- --- -- ------------ - --------------- ----- --------- ---- --- -- ------------ - -------------------- ------- --- --------- -------- ------------------------------------------------------------------------------------ --------- ----- --- - ------------------------- ---- ---------------------------- ---------------- - --------------------- - ------ ----------------------- - ------ --- ------------------------- - ---------- - ---------------------- - -------------------- ----- --- ------------------------- - ---------- - ------------------------ - ---------------------- ----- ----- ---------- ------- ----- ----------------- ----- ------------------------- ------ -------------- ----------------------- ------------ ------------ ---------------- ----------- ---- -------- -- ------- ---------- ----------------------------------- ------------------ ---------- ----------------------------------- ------------------ -------- -- ---- ----------------------- ------------ ------------ ---------------- ------- -- ---- ------ ----- ------ ------- ------- -------
在上面的代码中，我们定义了一个控制器，并使用该控制器设置了两个条件变量：isImportant 和 isHighlighted。当这些变量的值为 true 时，它们将分别控制“important”和“highlight”这两个 CSS 类的添加。我们还定义了两个按钮，用于切换这些条件变量的值。
最后，我们在一个 p 元素中演示了如何使用 ng-class 指令设置多个 CSS 类。当 isImportant 和 isHighlighted 变量的值分别为 true 时，该元素将具有“important”和“highlight”这两个 CSS 类。
结论
现在，你已经知道如何使用 ng-class 指令设置多个 CSS 类了。这个功能对于许多前端开发人员来说非常有用。你可以使用该功能来动态地切换元素的外观，同时使你的代码更容易管理。愿你的 AngularJS 旅程顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672db68feedcc8a97c85b741