angularjs - 使用 ng-class 有条件地应用 CSS 类

Question

我正在尝试使用 ng-class 应用多个 css 类。我正在执行以下操作。

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

查看工作中的笨蛋 here 。有更短的路吗？我尝试的另一种方法是调用返回 CSS 类列表的 Controller 函数，但我不想用 CSS 类名污染我的 Controller 。

Answer 1

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

<span status-class='status'>{{status}}</span>

app.directive('statusClass', function() {
  return function(scope, elem, attrs) {
    scope.watch(attrs.statusClass, function(value) {
      if(value == 'Ok')
        elem.addClass('label-success');
      else
        elem.removeClass('label-success');
      // ... etc ...
    });
  };
});

幕后有更多代码，但您的 View 已简化

如果您的类名称不同，并且无法使用这样的单个指令，您可能会发现在您的问题中使用 ng-class 是获得所需效果的最快方法。