Question

这个问题是关于AngularJS的性能，而不是编码风格。（话虽如此，如果在2017年使用ng-repeat是一种可怕的形式，请告诉我！）

我发现自己用ng-repeat编写了大量列表，并使用ng-class应用特殊样式来指示选择了哪个项目。

但是，我总是在策略之间翻转。我想知道是否有明确的＆＃34;最佳＆＃34;指示列表中所选项目的方式。在这种情况下，我的主要目标是尽可能提高性能。

选项A - 添加类似＆＃34; isSelected＆＃34;的属性到项目;如果为true，则通过ng-class

添加类

选项B - 对于列表中的每个项目，调用一个函数来检查它是否已被选中

选项C - 从选项B中的函数获取逻辑并将其直接放入DOM中，保存函数调用

我更喜欢选项B，因为我不必使用不必要的属性来改变对象。但是，检查是在ng-repeat内完成的，这意味着该函数将被调用数十次。逻辑本身非常便宜，正如你在下面看到的那样，但有没有听到过在$ digest里面调用它？

我选择哪个甚至更重要？

<!-- option A -->
<li ng-repeat"item in myItems"
    ng-class={ 'active': item.isSelected }">

<!-- option B -->
<li ng-repeat"item in myItems"
    ng-class={ 'active': vm.isItemSelected(item.code) }">

<!-- Option C --> 
<li ng-repeat"item in myItems"
    ng-class={ 'active': vm.itemCodeSelected === item.code }">

Answer 1

不，它并不比在视图中的其他任何地方调用范围表达式中的函数更糟糕。

范围表达式在每个摘要周期进行评估，无论它们是在ngClass还是ngStyle或ngShow或其他任何地方。

Answer 2

选项C. 您可以创建一个函数并在列表项单击中调用它。比较所选项目与项目本身

select(item) {
   $scope.selected = item
}

并像这样使用

<li ng-repeat"item in myItems"
    ng-click="$scope.select(item)"
    ng-class={ 'active': item == $scope.selected }">

这样一来，当ng-repeat正在完成它的工作时，没有检查任何东西，你不要改变你的对象

在ng-class中调用函数是不好的形式？

2 个答案: