如何在不重复的情况下同时使用 ng-value 和 ng-class？答案

【问题标题】：How to use both ng-value and ng-class without duplication?如何在不重复的情况下同时使用 ng-value 和 ng-class？
【发布时间】：2017-02-02 11:35:33
【问题描述】：

我有一个输入，它使用 ng-value 和过滤器来显示一个数字。

<input ng-value="myDataCollection | customFilter">

我还想申请 ng-class 将文本颜色更改为红色（如果为负数）。

<input ng-value="myDataCollection | customFilter" ng-class="{'negative-input': (myDataCollection | customFilter) < 0}">

这可行，但在我的用例中，过滤器需要做很多工作来计算结果值。输入也包含一个大的嵌套ng-repeat，因此性能是一个问题。

是否可以根据ng-value 设置的输入结果值使用ng-class，而无需运行两次过滤器？

【问题讨论】：

标签： angularjs performance ng-repeat ng-class angularjs-ng-value

【解决方案1】：

这是我的建议。您可以直接过滤值并将其保存在某个模型变量中。所以就像您将在您的数据收集上运行一次过滤器，然后在您想要的任何地方使用它。

$scope.filteredData = yourFilterFunction(yourDataCollection);//this will be filtered data values

 <input ng-value="filteredData" ng-class="{ filteredData < 0 ? 'negative-input': ''}">

【讨论】：

【解决方案2】：

如果我没记错的话，您可以使用ng-model 而不是ng-value。

这里有一点plunker 给你。

【讨论】：