Question

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

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

查看work plunker here。有更短的方式吗？我尝试的另一种方法是调用控制器函数，它返回一个CSS类列表，但我不想用CSS类名污染我的控制器。

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 ...
    });
  };
});

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

如果您的班级名称有所不同且您不能使用这样的单一指令，您可能会发现使用ng-class，因为您的问题是获得所需效果的最快方法。

Answer 2

为了让它更短，您可以尝试使状态名称和类名匹配，然后像这样：

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

<强> BUT ...

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

<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>

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

2 个答案: