javascript - ng-repeat 在悬停时连续发射

Question

我正在使用 UI-Select 0.8.4 并且有一个大数据集。然后我使用 UI-Select 在数据集旁边的下拉列表中显示属性值。我将其用于过滤器。因此，当从下拉列表中选择时，将过滤结果。

每次当我将鼠标悬停在下拉列表中的某个项目上时，它总是会触发 ng-repeat 过滤器。

这滞后于我的应用程序，因为我在 ng-repeat 中处理大量数据。

这是为什么？

动图: http://i.imgur.com/cStlXzy.gif

Plunker (打开控制台并亲自查看): http://plnkr.co/edit/OxiutZ8t4IX1bOxiOTgo?p=preview

HTML:

<h3>Age list</h3>
  <p>Selected: {{age.selected}}</p>
  <ui-select ng-model="age.selected" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select a person">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="age in ageArray | filter: $select.search">
      <div ng-bind="age | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

JavaScript:

$scope.theFilter = function(item) {
    console.log(item);
    return item;
  };

  $scope.ageArray = [];
  $scope.$watch('people', function(item) {
    for(var i = 0; i < item.length; i++) {
      $scope.ageArray.push(item[i].age);
    }
  });

  $scope.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
  ];

编辑:我什至尝试从“数据集数组”中过滤出属性值并在下拉列表中使用它，但它不起作用。

编辑 2: 如果您认为 watch 触发了这个，我删除了 watch ，这仍然是一个问题:http://plnkr.co/edit/oD3Tt3vfjtOjADMnemW1?p=preview

编辑 3: 仍然没有找到解决方案，所以我坚持 chosen .我 created an issue但没有得到任何回应。 如果你想解决这个问题，请给这个问题投票。

Answer 1

问题是过滤器在每个 $digest(每个 ng-mouseenter、ng-click 等)上执行。对于庞大的数据集，这显然会降低性能。 (参见本文 http://www.bennadel.com/blog/2489-how-often-do-filters-execute-in-angularjs.htm)

相反，尝试对 age.selected 值执行 $watch，然后仅在该值实际发生变化时才应用过滤器。

http://plnkr.co/edit/TIeKPAyrAQsGHwakqwEp?p=preview

HTML

<!-- filtered list "ageMatches" -->
<ul ng-show="age.selected">
  <li ng-repeat="person in ageMatches">{{person.name}} - {{person.age}}</li>
</ul>

<!-- default list of all "people" -->
<ul ng-hide="age.selected">
  <li ng-repeat="person in people">{{person.name}} - {{person.age}}</li>
</ul>

JS

// add age to scope
$scope.age = {};

// add age match placeholder  
$scope.ageMatches = [];

// watch age.selected for changes, apply filter
$scope.$watch('age.selected', function(newVal, oldVal){
  if(newVal){
    $scope.ageMatches = $filter('filter')($scope.people, {age: newVal});
  }
});