ng-repeat 在大数据集上使用多个过滤器 [英] ng-repeat with multiple filters on large data set

问题描述

我还是 AngularJS 的新手，所以我只是尝试做一个简单的 CRUD 应用程序.目前，我使用 $http 在由控制器 MyCtrl1 处理的 div 中提取数据(在 JSON 文件中).

function MyCtrl1($scope, $http) {$http.get('data/accounts.json').success(function(data) {$scope.accounts = 数据；...});}

在这个 div 里面是一个 table 和下面的 tbody:

<tr ng-repeat="账户中的账户 | orderBy:sort.field:sort.desc | startFrom:currentPage * pageSize | limitTo:pageSize"><td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td></tr></tbody>

orderBy 过滤器根据选定的字段进行排序；startFrom 对数组进行切片以从某个点开始；limitTo 根据预设的页面大小进行过滤.没有分页过滤器，性能非常糟糕，但我想知道是否有其他方法可以解决这个问题?

我有适用于 Chrome 的 Batarang，在性能"选项卡下，它显示 ngRepeatWatch 占用的时间最多，我认为这与我正在执行的所有过滤有关..

解决方案

{{ expression |过滤器1 |filter2 }}

只要使用

Angular 2 使用 pipes，但它看起来像过滤器:

被锁链英雄的生日是<p>{{ 生日 |日期:'fullDate' |大写}}</p><div>

I'm still new to AngularJS, so I'm just trying to do a simple CRUD app. Currently I pull the data (in a JSON file) with $http in a div handled by a controller MyCtrl1.

function MyCtrl1($scope, $http) {
    $http.get('data/accounts.json').success(function(data) {
        $scope.accounts = data;
    ...
    }); 
}

Inside this div is a table with the following tbody:

<tbody>
    <tr ng-repeat="account in accounts | orderBy:sort.field:sort.desc | startFrom:currentPage * pageSize | limitTo:pageSize">
        <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
    </tr>
</tbody>

The orderBy filter sorts according to a selected field; startFrom slices the array to start at a certain point; limitTo filters according to a preset page size. Without the pagination filters the performance was pretty terrible, but I was wonder if there was an alternative way to go about this?

I have Batarang for Chrome and under the Performance tab it showed ngRepeatWatch taking up the most time, and I reckon it has to do with all the filtering I'm doing..

解决方案

{{ expression | filter1 | filter2 }}

Just use

<tr ng-repeat="account in accounts | filter1 | filter2 | filter3" >
  <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
</tr>

Angular 2 uses pipes, but its looks like filters:

<div>The chained hero's birthday is
<p>{{  birthday | date:'fullDate' | uppercase}}</p>
<div>

这篇关于ng-repeat 在大数据集上使用多个过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！