Question

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

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

此div内的table是以下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>

orderBy过滤器根据所选字段进行排序; startFrom将数组切片以从某个点开始; limitTo根据预设的页面大小进行过滤。没有分页过滤器，性能非常糟糕，但我很想知道是否有另一种方法可以解决这个问题？

我有Batarang for Chrome，在性能标签下显示ngRepeatWatch占用了大部分时间，我认为它与我正在进行的所有过滤有关..

Answer 1

只需使用

<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使用pipes，但它看起来像过滤器：

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

Answer 2

我知道这个问题已经过时了，但对未来的任何人来说都是如此。在线过滤是昂贵的（计算上的）因为它直接在DOM上工作，如果你处理1000多行的大量数据，那么在你的控制器中过滤你的集合然后重复它就好了。

Answer 3

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

Answer 4

这不是过滤器，但您可以使用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="m-t-0 m-b-5">{{message.title }}</h3>
        <p class="text-muted m-b-5 font-13" ng-bind-html="message.content | ellipsis:147 | trusted"></p>
        <!-- <p class="text-muted m-b-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：摘自John Papa风格指南（Angular -1） - 通过委托服务和工厂推迟控制器中的逻辑。

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

为什么？：服务中的逻辑可以更容易地在单元测试中被隔离，而控制器中的调用逻辑可以很容易地被模拟。

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

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

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

在大型数据集上使用多个过滤器进行ng-repeat

5 个答案: