ng lặp lại liên tục được kích hoạt khi di chuột

Question

Tôi đang sử dụng UI-Select 0.8.4 và có tập dữ liệu lớn. Sau đó, tôi đang sử dụng giao diện người dùng-Chọn để hiển thị giá trị thuộc tính trong menu thả xuống bên cạnh tập dữ liệu. Tôi đang sử dụng nó cho các bộ lọc. Vì vậy, khi chọn từ menu thả xuống, sẽ lọc kết quả.

Mỗi khi tôi di chuột qua một số mục trong menu thả xuống, nó luôn kích hoạt bộ lọc ng-lặp lại.

Điều này làm chậm ứng dụng của tôi vì tôi đang làm việc với một bộ lớn trong ng-lặp lại.

Tại sao điều này?

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

Plunker (giao diện điều khiển mở và xem cho chính mình): 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 } 
    ]; 

Chỉnh sửa: Tôi thậm chí đã cố lọc các giá trị thuộc tính ra khỏi "mảng tập dữ liệu" và sử dụng trong trình đơn thả xuống, nhưng nó không hoạt động.

Chỉnh sửa 2: Nếu bạn nghĩ rằng chiếc đồng hồ đã được kích hoạt này, tôi lấy ra chiếc đồng hồ và đây vẫn là một vấn đề: http://plnkr.co/edit/oD3Tt3vfjtOjADMnemW1?p=preview

Sửa 3: Vẫn chưa tìm thấy một giải pháp cho nên đây Tôi bị kẹt với chosen. Tôi created an issue nhưng chưa nhận được phản hồi nào. Hãy upvote vấn đề nếu bạn muốn điều này cố định.

Answer 1

Vấn đề là bộ lọc đang thực thi trên mọi $digest (mỗi ng-mouseenter, ng-click, v.v ...). Đối với một tập dữ liệu khổng lồ, điều này rõ ràng có thể giết hiệu suất. (Xem bài viết này http://www.bennadel.com/blog/2489-how-often-do-filters-execute-in-angularjs.htm)

Thay vào đó, hãy thử một $watch trên giá trị age.selected, sau đó chỉ áp dụng bộ lọc khi giá trị đó thực sự thay đổi.

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