将元素属性传递给 ng-class 表达式答案

【问题标题】：Passing in element properties to ng-class expressions将元素属性传递给 ng-class 表达式
【发布时间】：2016-07-05 17:00:57
【问题描述】：

我想知道是否可以使用 ng-class 并提供一个基于正在使用的元素的内部内容的表达式。

例如，假设我有：

<table>
    <tr ng-repeat="result in results">
        <td ng-class="vm.getNumberClass(...)">
            {{vm.getSomeMagicNumber(result)}}
        </td>
    </tr>
</table>

我可以将td 单元格内容的值作为参数传递给我正在用作ng-class 指令表达式的getNumberClass 函数吗？

编辑

当我说传入 td 单元格内容的值时，我的意思是将 {{vm.getSomeMagicNumber(result)}} 的评估结果作为参数传入

我可以做类似的事情。

<td ng-class="vm.getNumberClass(vm.getSomeMagicNumber(result))">
    {{vm.getSomeMagicNumber(result)}}
</td>

虽然这确实适用于我的场景，但感觉就像两次调用函数时性能受到影响

【问题讨论】：

当然可以，如果它在同一个范围内。您的循环位于您的ng-class 和<td> 之上，因此您可以从两者中调用result。您甚至可以在循环ng-repeat 的同一级别使用result 变量。
是的，这不是我的意思，看看我的编辑，我看到你刚刚发布了一个答案并很快再次删除，但看到你提出的建议与我目前为止的相同跨度>
我根据您的编辑更新了我的答案。

标签： angularjs

【解决方案1】：

我不太明白你愿意在这些函数中做什么。

为了避免两次调用该函数，我将采取以下措施，您必须将结果存储在某个地方（如果它不在 CPU 上，则它必须在 RAM 上）：

angular.module('myApp', []);

angular.module('myApp').controller('MyCtrl', function() {
  var vm = this;

  vm.getNumberClass = function(number) {
    var className = '';

    switch (parseInt(number)) {
      case 3:
        className = 'red';
        break;
      case 6:
        className = 'coral';
        break;
      case 9:
        className = 'pink';
        break;
    }
    
    return className;
  };

  vm.getSomeMagicNumber = function(result) {
    // Any process here and store the result for each row
    result.magicNumber = result.id * 3;
    
    return result.magicNumber;
  };

  vm.results = [{
    id: '1'
  }, {
    id: '2'
  }, {
    id: '3'
  }];
});

.red {
  background-color: red;
}

.coral {
  background-color: coral;
}

.pink {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <table>
    <tr ng-repeat="result in vm.results">
      <td ng-class="vm.getNumberClass(result.magicNumber)">
        {{vm.getSomeMagicNumber(result)}}
      </td>
    </tr>
  </table>
</div>

【讨论】：