6

UI-Select 0.8.4 を使用していて、大きなデータ セットがあります。次に、UI-Select を使用して、データ セットの横にあるドロップダウンにプロパティ値を表示します。それをフィルターに使っています。したがって、ドロップダウンから選択すると、結果がフィルタリングされます。

ドロップダウンのアイテムにカーソルを合わせるたびに、常に ng-repeat フィルターが起動します。

私はng-repeatで大きなセットを扱っているため、これは私のアプリケーションに遅れをとっています。

どうしてこれなの？

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

プランカー(コンソールを開いて自分の目で確かめてください) : 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:これに対する解決策がまだ見つかっていないため、 selected にこだわっています。問題を作成しましたが、応答がありません。これを修正したい場合は、問題に賛成票を投じてください。

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その値が実際に変化した場合にのみフィルターを適用します。

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 に答える