2

我正在尝试使用 ng-class 应用多个 css 类。我正在做以下事情。

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

请参阅此处的工作 plunker 。有没有更短的方法？我尝试的另一种方法是调用返回 CSS 类列表的控制器函数，但我不想用 CSS 类名污染我的控制器。

4

2 回答 2

6

重构您认为过于复杂的 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 ...
    });
  };
});

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

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

于 2013-03-09T04:21:52.387 回答
2

为了以更短的方式使它变得更短，您可以尝试使状态名称和类名称匹配，然后是这样的：

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

但...

在现实生活中，事情可能更复杂。由于您可能拥有比引导警报更多的状态，并且由于应用程序中的状态标签与引导类名称不完全相同，因此这可能是最佳选择：

<span class="label" ng-class="alert_class(status)">{{status}}</span>

在你的控制器中：

  $scope.alerts = {
    'Warnings': 'label-warning',
    'Ok': 'label-success',
    'Critical': 'lablel-important'
  };

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

$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>
于 2013-03-09T09:12:12.380 回答