ng-repeat kontinuierlich auf Hover

Question

gefeuert Ich verwende UI-Select 0.8.4 und habe einen großen Datensatz. Dann verwende ich UI-Select, um Eigenschaftswerte in einem Dropdown neben dem Datensatz anzuzeigen. Ich benutze das für Filter. Wenn Sie also aus dem Dropdown-Menü wählen, werden die Ergebnisse gefiltert.

Jedes Mal, wenn ich über einen Eintrag im Dropdown-Menü schwebe, wird immer der ng-repeat-Filter ausgelöst.

Dies ist meiner Anwendung nachhinkt, weil ich mit einem großen Satz in der ng-Wiederholung arbeite.

Warum ist das?

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

Plunker (offene Konsole und sehen Sie selbst): 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 } 
    ]; 

Bearbeiten: Ich habe sogar versucht, die Eigenschaftswerte aus dem "Datensatzarray" zu filtern und das im Dropdown verwenden, aber es funktioniert nicht.

Edit 2: Wenn Sie denken, dass die Uhr diese wurde Auslösung entfernte ich die Uhr, und das ist immer noch ein Problem: http://plnkr.co/edit/oD3Tt3vfjtOjADMnemW1?p=preview

bearbeiten 3: Noch keine Lösung für dieses so gefunden haben Ich stecke mit chosen fest. Ich habe created an issue, aber habe keine Antwort bekommen. Bitte aktualisieren Sie das Problem, wenn Sie dies behoben möchten.

Answer 1

Das Problem ist, dass der Filter auf jedem $digest ausgeführt wird (jedes ng-Mouseenter, NG-Klick, usw.). Bei einem riesigen Datenbestand kann dies die Leistung beeinträchtigen. (Siehe in diesem Artikel http://www.bennadel.com/blog/2489-how-often-do-filters-execute-in-angularjs.htm)

Stattdessen versuchen, ein $watch auf dem age.selected Wert, dann einen Filter nur Anwendung, wenn dieser Wert tatsächlich ändert.

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