Question

有以下代码：

HTML：

<tr ng-repeat="o in orders" ng-class="getOrderClass(o)">

CoffeeScript的：

  $scope.getOrderClass = (o) ->
    switch o.orderStatus.title
      when 'New' then 'new-order'
      when 'Completed' then 'completed-order'

代码看起来不错，但有一个问题：页面加载后，我在'ng-class'属性中看到'new-order'类或'completed-order'类，而不是'class'。哪里出错了？提前致谢

Answer 1

你可以使用那个结构

ng-class="{'new-order' : o.orderStatus.title == 'New', 'completed-order' : o.orderStatus.title == 'Completed'}"

Answer 2

在这种情况下，您已使用ng-class作为属性如果您检查或查看源，则它将被列为ng-class属性的值如果你需要＆＃34; class＆＃34;中计算出的类值。属性，然后使用此语法

如果使用此语法，则class属性将具有类名以及用于计算此类的表达式

Answer 3

试试这个：

$scope.getOrderClass = (o) ->
  title = o.orderStatus.title
  {
    'new-order': title == 'New'
    'completed-order': title == 'Completed'
  }

Answer 4

你可以写一个这样的指令

app.directive('myClass', [function(){
  return {
    scope: {
      class: '=myClass'
    },
    restrict: 'A',
    link: function(scope, elem, attrs, controller) {
      elem.addClass(scope.class);
    }
  };
}]);

在视图中：

<div my-class="getOrderClass(o)">I have the getOrderClass(o) class</div>

我建议你以某种方式缓存getOrderClass（o）的结果，因为当你绑定一个函数调用时，它会在每个摘要圈上被调用。从长远来看，这可能会导致性能问题，通常不是一个好习惯，特别是如果函数处于ng-repeat中。

可能是这样的 <div ng-repeat="o in orders" my-class="orderClasses[o.id]">I have the getOrderClass(o) class</div>

编辑：请注意，该指令仅在指令初始化时添加一次类，因此它不像普通的双向绑定那样工作。如果您喜欢，还必须为scope.class添加一个观察者并再次调用elem.addClass

Angular ng-class动态CSS

4 个答案: