Question

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

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

这使我的应用程序滞后，因为我正在使用ng-repeat中的大型集合。

为什么会这样？

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：如果您认为手表触发了此操作，我就移除了手表，这仍然是一个问题：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）

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

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});
  }
});

ng-repeat在悬停时不断触发

1 个答案: