如何使用 AngularJS 切换类？

在 AngularJS 中，可以使用 ng-class 指令来切换类。ng-class 可以接受一个对象或一个函数，根据条件动态添加或移除类。

使用对象切换类

当 ng-class 接受一个对象时，它会根据对象的值来添加或移除类名。例如：

<div ng-class="{ 'bg-primary': isPrimary, 'text-white': isPrimary }">Hello World</div>

上面的例子中，当 isPrimary 为 true 时，会给 div 元素添加 bg-primary 和 text-white 两个类名。

使用函数切换类

如果需要根据更复杂的条件来切换类名，可以使用函数。函数可以接受一个参数，这个参数是当前元素的 $scope 对象。例如：

<div ng-class="getClass($scope)">Hello World</div>

在这个例子中，我们需要在控制器中定义 getClass 函数：

$scope.getClass = function(scope) {
  if (scope.isPrimary) {
    return 'bg-primary text-white';
  } else {
    return '';
  }
}

getClass 函数会根据 $scope 对象中的属性来返回类名，如果 isPrimary 为 true，就返回 'bg-primary text-white'，否则返回空字符串。

结语

通过 ng-class 指令，我们可以很方便地根据条件切换类名，让页面元素拥有更丰富的样式。