使用 ng-class 添加多个类

在 AngularJS 中，我们可以使用 ng-class 指令将多个 CSS 类动态添加到元素上。

语法

<div ng-class="{ customClass1: expression1, customClass2: expression2 }"></div>

ng-class 指令的属性值是一个对象，其中键是 CSS 类名，值是用于控制添加或删除该类的表达式。

示例

假设我们有一个数据模型 person：

$scope.person = {
  name: 'John',
  age: 25,
  gender: 'male'
};

我们可以使用 ng-class 指令动态地添加不同的 CSS 类来根据 person 对象的性别属性应用不同的样式：

<!-- male 类将被添加到样式中 -->
<div ng-class="{ 'male': person.gender === 'male', 'female': person.gender === 'female' }">
  <p>{{ person.name }}</p>
  <p>{{ person.age }}</p>
  <p>{{ person.gender }}</p>
</div>

在这个例子中，如果 person.gender 的值是 'male'，则 male 类将被添加到 div 元素上。如果 person.gender 的值是 'female'，则 female 类将被添加到 div 元素上。

添加多个类

如果你想添加多个 CSS 类，只需要将它们用空格分开即可，例如：

<!-- 'male blue' 类将被添加到样式中 -->
<div ng-class="{ 'male': person.gender === 'male', 'blue': person.favoriteColor === 'blue' }">
  ...
</div>

自定义类名

你也可以指定自己的 CSS 类名，例如：

<!-- 'gender-male color-blue' 类将被添加到样式中 -->
<div ng-class="{ 'gender-male': person.gender === 'male', 'color-blue': person.favoriteColor === 'blue' }">
  ...
</div>

表达式

在 ng-class 指令中，表达式必须返回一个布尔值，用于确定是否添加或删除指定的 CSS 类。

<!-- 'custom-class' 类将被添加到样式中 -->
<div ng-class="{ 'custom-class': someVariable }">
  ...
</div>

在这个例子中，如果 someVariable 的值为 true，则 custom-class 类将被添加到 div 元素上。如果 someVariable 的值为 false，则该类将被删除。

总结

ng-class 指令是一个非常有用的工具，可以让我们动态地为元素添加或删除 CSS 类。我们可以使用表达式来控制如何添加或删除这些类，从而轻松地创建动态的样式。