使用Angular ng-class可以选择三个选项

Question

使用 angular.js ，如何使用 ng-class 和三种可能的选项？

如果status == 'active'我要添加课程progress-bar-success。如果status == 'terminated'我要添加课程progress-bar-danger，请添加课程progress-bar-info。

Answer 1

3个条件：

ng-class="{'progress-bar-success':status == 'active', 'progress-bar-danger':status == 'terminated', 'progress-bar-info' : status != 'terminated' || status != 'active'}"

Answer 2

如果你需要在你的变量发生变化时做很多事情，并希望保持你的html简单，你可以存储＆＃34;状态＆＃34;服务中的变量，并且都在控制器中执行逻辑。

在您的控制器中：

$scope.$watch(yourService.status, function(newVal) {
        switch(newval){
            case "active":
                $scope.progressbar_class = "progress-bar-success"
                [.. a lot of other stuff...]
                break
            case "terminated":
                $scope.progressbar_class = "progress-bar-danger"
                [.. a lot of other stuff...]
                break
            default:
                $scope.progressbar_class = "progress-bar-info"
                [.. a lot of other stuff...]
                break
        }

    }, true);

您的HTML将只是

<div class="progressbar {{progressbar_class}}"></div>

如果你需要一些非常简单的东西，那么来自tymeJV的另一个答案要短得多。