Ng-repeat fires continuously on hover

Question

I am using UI-Select 0.8.4 and has a large dataset. Then I use UI-Select to display the property values ​​in the drop-down list next to the dataset. I use this for filters. Therefore, choosing from a drop-down list will filter the results.

Each time I hover over an item in the drop-down list, it always starts the ng-repeat filter.

This is lagging behind my application because I am working with a large set in ng-repeat.

Why is this?

GIF: http://i.imgur.com/cStlXzy.gif

Plunker (open the console and see for yourself): 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: ' [e-mail] ', age: 10 }, { name: 'Amalie', email: ' [e-mail] ', age: 12 }, { name: 'Wladimir', email: ' [e-mail] ', age: 30 }, { name: 'Samantha', email: ' [e-mail] ', age: 31 }, { name: 'Estefanía', email: 'estefaní [e-mail] ', age: 16 }, { name: 'Natasha', email: ' [e-mail] ', age: 54 }, { name: 'Nicole', email: ' [e-mail] ', age: 43 }, { name: 'Adrian', email: ' [e-mail] ', age: 21 } ]; 

Change I even tried to filter property values ​​from an array of data arrays and use them in the drop-down list, but this does not work.

Edit 2: If you think the clock was running this, I deleted the clock and this is still the problem: <a3>

Edit 3: Still haven't found a solution for this, so I'm stuck with chosen , I created a problem , but didn't get any answer. Please support the problem if you want this fixed.

Answer 1

The problem is that the filter runs on every $digest (every ng-mouseenter, ng-click, etc.). For a huge dataset, this can obviously lead to poor performance. (See This article http://www.bennadel.com/blog/2489-how-often-do-filters-execute-in-angularjs.htm )

Instead, try $watch by age.selected , and then apply the filter only when that value really changes.

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