Angularjs 使用ng类有条件地应用CSS类

我正在尝试使用ng类应用多个css类。我正在做以下工作

  <span ng-class="{'label':true, 'label-success':status=='Ok', 'label-warning':status=='Warnings', 'label-important':status=='Critical'}">{{status}}</span>

{{status}

---

请参阅正在工作的plunker。有较短的路吗？我尝试过的另一种方法是调用controller函数，该函数返回CSS类列表，但我不希望用CSS类名污染我的控制器。

重构您认为过于复杂的DOM功能的一个好方法是创建一个指令；例如，您可以创建一个指令，该指令仅基于字符串有条件地应用一个类：

{{status}

app.directive（'statusClass'，function（））{
返回函数（范围、元素、属性）{
范围.监视（属性.状态类，函数（值）{
如果（值=='Ok'）
元素addClass（“标签成功”）；
其他的
elem.removeClass（“成功标签”）；
//……等等。。。
});
};
});

幕后有更多的代码，但是您的视图被简化了

---

如果您的类名不同，并且不能使用这样一个指令，您可能会发现使用您的问题中的

ng class

是获得所需效果的最快方法。

要缩短时间，您可以尝试使状态名和类名匹配，然后执行以下操作：

<span class="label" ng-class="'label-'+status">{{status}}</span>

$scope.statuses =
  warning:
    label: 'Warnings'
    class: 'label-warning'
  ok:
    label: 'It`s OK'
    class: 'label-success'
  critical:
    label: 'Something is going wrong...'
    class: 'label-important'

最后，如果代码中的状态、状态标签和引导类都不同，则需要更复杂的结构，如下所示：

<span class="label" ng-class="'label-'+status">{{status}}</span>

$scope.statuses =
  warning:
    label: 'Warnings'
    class: 'label-warning'
  ok:
    label: 'It`s OK'
    class: 'label-success'
  critical:
    label: 'Something is going wrong...'
    class: 'label-important'

并以这种方式使用它：

<span class="label" ng-class="statuses[status].class">{{statuses[status].label}}</span>

{{statuses[status].label}

我只是好奇，既然每个类都需要有条件地应用，那么你怎么能把它缩短呢？如果不缩短就更好了。我把所有3个选项（使用ng类、使用指令和使用控制器）都放在这里表示感谢。这就是我正在做的，但如果可能的话，我会尽量避免将模板逻辑放入控制器中。@Kamlesh，那么您应该使用指令并将其放入itI中，就像这种方法一样。干得好。