Angular ng 类动态 CSS答案

【问题标题】：Angular ng-class dynamic CSSAngular ng 类动态 CSS
【发布时间】：2015-09-15 15:30:28
【问题描述】：

有如下代码：

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' 中。错误在哪里？在此先感谢

【问题讨论】：

错误在于 ng-class 根据真假表达式动态添加和删除类。在您的情况下，您没有告诉 ng-class 添加该类，您只是将其传递给静态值。尝试将其添加到类属性或传回表达式，例如 {'new-order': true}。

标签： javascript css angularjs coffeescript

【解决方案1】：

你可以使用那个结构

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

【讨论】：

这是非常难看的代码。我以后可以添加更多状态:) 对不起兄弟，谢谢你的尝试

【解决方案2】：

在这种情况下，您使用了 ng-class 作为属性如果您检查或查看源代码，那么它将被列为 ng-class 属性的值如果您需要“类”属性中计算的类值，则使用此语法

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案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

【讨论】：