在 Angular 中，ng-class 指令可以动态地为元素添加或删除一个或多个 CSS 类，从而改变元素的样式。在本篇文章中，我们将深入了解 ng-class 指令，并且给出一些实例代码来帮助您更好地理解。
ng-class 的语法
ng-class 的语法非常简单直观。您可以在任何指令中使用它来动态修改 CSS 类。以下是 ng-class 的语法：
<!-- 将数组作为表达式传递给 ng-class -->
<p ng-class="[class1, class2, class3]">Some Text</p>
<!-- 将对象作为表达式传递给 ng-class -->
<p ng-class="{class1: condition1, class2: condition2, class3: condition3}">Some Text</p>
<!-- 将表达式作为参数传递给 ng-class -->
<p ng-class="expression">Some Text</p>ng-class 数组表达式
我们通常使用数组表达式来传递一组 CSS 类，这样可以简化 ng-class 的使用。考虑下面的实例：
<div ng-class="['bg-blue', 'fg-white']"> This is a sample text </div>
上面的例子会为
您还可以基于某个条件来动态添加或删除 CSS 类。下面看一个实例：
<div ng-class="['alert-success', 'alert-info', 'alert-warning', 'alert-danger'][value]"> This is a sample text </div>
在这个例子中，我们使用值来动态决定添加哪一个类名。如果 value 为 0，那么就会添加 alert-success 类名，如果 value 为 1，那么就会添加 alert-info 类名，以此类推。
ng-class 对象表达式
您也可以使用对象表达式传递一个对象，这个对象包含了 CSS 类名及它们的条件。下面看一个例子：
<div ng-class="{ 'visible': show }">
This is a sample text
</div>在上面的例子中，CSS 类名是 visible，条件是 show。当 show 值为 true 时，CSS 类 visible 会被添加。
您也可以使用表达式作为键。例如：
<span ng-class="{'foo': bar > 0, 'big': bar < 0}">
This is a sample text
</span>这里使用了两个表达式来决定添加哪个类。如果 bar 的值大于 0，就会为元素添加一个 foo 类；如果 bar 的值小于 0，就会添加一个 big 类。
ng-class 表达式
最后，您还可以使用表达式来传递 ng-class。在下面的例子中，我们使用表达式计算某个 CSS 类：
<div ng-class="isActive ? 'active' : 'inactive'"> This is a sample text </div>
在这个例子中，我们使用 isActive 条件来决定是添加 active 类还是 inactive 类。
总结
ng-class 指令是一个非常方便的指令，可以让您通过添加或删除 CSS 类来动态修改元素的样式。您可以使用数组、对象或表达式传递 CSS 类，这些 Css 类可以动态计算或基于某个条件来添加或删除。我希望这篇文章能帮助您深入了解 ng-class 指令，同时提高您在 Angular 中开发的能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65386c247d4982a6eb1309db