6

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

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

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

为什么是这样？

GIF：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：如果您认为手表触发了这个，我删除了手表，这仍然是一个问题：http ://plnkr.co/edit/oD3Tt3vfjtOjADMnemW1?p=preview

编辑 3：仍然没有找到解决方案，所以我坚持选择. 我创建了一个问题，但没有得到任何回应。如果你想解决这个问题，请投票赞成这个问题。

4

1 回答 1

3

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

相反，尝试$watch对age.selected值进行 a ，然后仅在该值实际更改时应用过滤器。

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});
  }
});
于 2014-12-03T16:32:13.410 回答