Question

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

例如，说我有：

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

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

修改

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

我可以做类似的事情。

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

虽然这对我的场景有用，但感觉就像是在两次调用函数时性能上升

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

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

1 个答案: