AngularJS NG重复具有更好的性能 - 在控制器中重新分配值或过滤值

Question

使用 ng-repeat当哪种方法具有更好的性能？(假设有大量用户(

方法1：控制器中的过滤器

<div ng-repeat="user in users | showBlocked">
  <strong>{{user.id}}</strong>
  <span>{{user.name}}
</div>

模板中的html代码

$scope.users = [
   { id: 1, name: 'alex', isBlocked: true},
   { id: 2, name: 'john', isBlocked: true}
];

控制器中的JavaScript代码

showBlocked是一个过滤器，它返回一个阻止用户的列表

.filter('showBlocked', function() {
  return function(users) {
    return users.filter(user => user.isBlocked);
  }
});

方法2：重新安装用户列表

<button ng-click="reassignUser(1)">reassign user</button>
<div ng-repeat="user in users">
  <strong>{{user.id}}</strong>
  <span>{{user.name}}
</div>

模板中的html代码

$scope.reassignUser = function (userId) {
  if (userId === 1) {
    $scope.users = [{id: 1, name: 'alex', isBlocked: true}];
  }
  // in this case just assigns a single user
};

Codepen演示：NG重复过滤器与重新分配绑定

确实让我知道您是否需要任何其他信息。

Answer 1

ng-repeat在每个$摘要周期都进行评估，这使得由于$ DIRTY检查而导致双向数据结合的速度非常慢。最好的解决方案是使用{{:: data}}语法使用单向数据结合。

但是，在您的示例中，最好重写数组而不是过滤数组。由于每个过滤器创建了原始列表的子集合，因此使用过滤器将起作用慢。但是，可以通过使用ng-show隐藏数据来不同。这是有关复杂解决方案的文章，但是您可以考虑以下简单示例：

angular.module('myApp', []);
angular.module('myApp').controller('Ctrl', ['$scope', function($scope) {
  $scope.users = [{name:"John", "id":0}, 
    {name:"Adam", "id":1}, 
    {name:"Ado", "id":2}, 
    {name:"Chris", "id":3}, 
    {name:"Heather", "id":4}, 
    {name:"Stan", "id":5}];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
  ID: <input ng-model="query" />
  <ul>
    <li ng-repeat="user in users" ng-show="([user.id] | filter:query).length">
      {{user.name}}
    </li>
  </ul>
</div>