Question

我有一个复杂的ng-class这个td工作得很好。 <td ng-repeat="column in columns" ng-class="'cell-value-' + column.name + '-'+ row[column.name] | safeClassName" >

我想在td中添加另一个类，它只是列名。这似乎不起作用

<td ng-repeat="column in columns" ng-class="'cell-value-' + column.name + '-'+ row[column.name] | safeClassName" ng-class="'cell-column-' + column.name | safeClassName" >
对于一些小的信息，safeClassName将空格转换为破折号并过滤掉无效字符

我怎样才能将第二个计算类转到我的td？

Answer 1

AngularJS不支持同一元素上的多个ngClass指令，但它支持一个表达式，该表达式求值为以空格分隔的类名或类名数组的字符串。

由于逻辑变得复杂，我会将逻辑移动到视图模型（或$ scope）函数中生成类名。

<td ng-repeat="column in columns" ng-class="vm.computeClass(column)" />

控制器应具有以下功能：

vm.computeClass = function(column) {
  var classNames = [];

  classNames.push('cell-value-' + column.name + '-'+ row[column.name] | safeClassName);
  classNames.push('cell-column-' + column.name | safeClassName);

  return classNames;
};

Answer 2

您可以使用ng-class

的数组语法

<td ng-repeat="column in columns" 
   ng-class="['cell-value-' + column.name + '-'+ row[column.name] | safeClassName,'cell-column-' + column.name | safeClassName]"
 >

多个复杂的计算ng类

2 个答案: