在 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 指令的例子：
---- ----------- ------- -------- ---------
上面的代码将添加名为“active”的 CSS 类到该 div 元素，当 isActive 为 true 时。你可以在控制器中使用 isActive 变量来控制该 CSS 类是否加入。
如何设置多个 CSS 类？
如果我们要设置多个 CSS 类，我们可以使用以下这种格式：
---- ------------------ ------ -------- ------------------
在上面的代码中，class1、class2 和 class3 是我们要添加的 CSS 类的名称。我们可以在 condition 变量的控制下添加这些类。当 condition 的值为 true 时，这些 CSS 类被添加到元素上。
这种方式看起来很麻烦，因为你需要手动添加空格以区分每个 CSS 类。为了更好地管理 CSS 类，我们可以使用以下这种格式：
---- -------------------- ----------- --------- ----------- --------- -------------------
在这种情况下，我们将每个 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