在大数据集上使用多个filter进行重复

我还是AngularJS的新手，所以我只是想做一个简单的CRUD应用程序。 目前我拉数据（在一个JSON文件） $http在一个由控制器MyCtrl1处理的MyCtrl1 。

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

在这个div里面有一个带有下面的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> 

orderByfilter根据选定的字段进行sorting; startFrom将数组切片以在某个点开始; limitTo根据预设的页面大小进行过滤。 没有分页filter的performance是非常可怕的，但我想知道是否有其他方式去做这个？

我有Chrome的ngRepeatWatch和性能选项卡，它显示ngRepeatWatch占用最多的时间，我认为它必须做我所做的所有过滤。

Answer 1

{{expression式| filter1 | filter2}}

只是使用

 <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使用pipe道 ，但看起来像filter：

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

Answer 2

我知道这个问题是古老的，但对于将来的任何人。 因为它直接在DOM上工作，所以在线过滤是很昂贵的（计算上），如果你处理大量的数据，超过1000行，那么在你的控制器中过滤你的集合会更好，然后再重复。

Answer 3

我会在控制器或服务器端处理分页。 我的猜测是，ng-repeat正在看你的整个列表，而不是只看它需要什么，这将是非常缓慢的。

Answer 4

这不是一个filter，但您可以使用ng-hide指令来评估数组的$ index，如下所示：

 <div class="col-sm-12 col-lg-12" ng-repeat="message in messages | orderBy: '-id' as filtered_result track by message.id "> <div class="card-box widget-user" ng-hide="{{$index >= 4}}"> <div> <img ng-src="{{message.imageUrl}}" class="img-responsive" alt="{{message.imageUrl}}"> <div class="wid-u-info"> <h3 class="mt-0 mb-5">{{message.title }}</h3> <p class="text-muted mb-5 font-13" ng-bind-html="message.content | ellipsis:147 | trusted"></p> <!-- <p class="text-muted mb-5 font-13">{{message.content | limitTo:130}}</p> --> <small class="label" ng-class="{'label-success':message.type=='Message','label-warning':message.type=='Announcement'}"><b>{{message.type}}</b></small> </div> </div> </div> </div> 

Answer 5

CRUD应在工厂或服务中处理，而不是在控制器中处理。 我的理解是，一个控制器只负责视图和服务之间的通信。

编辑1：约翰帕帕风格指南（angular-1）的摘录 – 通过委托给服务和工厂推迟控制器中的逻辑。

为什么？：逻辑可以被多个控制器重用，当放置在一个服务中，并通过一个函数暴露。

为什么？：在一个unit testing中，一个服务中的逻辑可以更容易被隔离，而控制器中的调用逻辑很容易被模拟。

为什么？：从控制器中删除依赖项并隐藏实现细节。

为什么？：保持控制器纤细，修剪和聚焦。

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y035