AngularJS - 如何添加多个 ng-class 指令

html
<div ng-class="{'class1': condition1, 'class2': condition2, 'class3': condition3}"></div>

元素上应用了三个ng-class指令，并分别为它们指定了不同的CSS类。条件condition1、condition2和condition3决定了是否添加相应的类。如果条件为真，则该类将被添加到元素中，否则将被移除。

在上面的例子中，我们使用了对象字面量来指定每个ng-class指令的CSS类和条件。您可以根据自己的需求进行修改和扩展。

案例代码：

让我们通过一个实际的例子来演示如何在AngularJS中添加多个ng-class指令。

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Multiple ng-class Example</title>
    <style>
        .red {
            color: red;
        }
        
        .bold {
            font-weight: bold;
        }
        
        .underline {
            text-decoration: underline;
        }
    </style>
    <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
    <script>
        angular.module('myApp', [])
            .controller('myController', function($scope) {
                $scope.isRed = true;
                $scope.isBold = false;
                $scope.isUnderline = true;
            });
    </script>
</head>
<body ng-controller="myController">
    <div ng-class="{'red': isRed, 'bold': isBold, 'underline': isUnderline}">Hello, AngularJS!</div>
</body>
</html>

在上面的代码中，我们定义了三个CSS类，分别为.red、.bold和.underline。通过ng-class指令，我们根据$scope中的条件变量isRed、isBold和isUnderline来动态地添加或移除这些类。

当isRed为true时，.red类将被添加到