41

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

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根据预设的页面大小进行过滤。如果没有分页过滤器，性能非常糟糕，但我想知道是否有其他方法可以解决这个问题？

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

4

5 回答 5

73

{{ 表达式 | 过滤器1 | 过滤器2}}

只需使用 

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

<div>The chained hero's birthday is
<p>{{  birthday | date:'fullDate' | uppercase}}</p>
<div>
于 2013-08-22T13:31:53.763 回答
11

我知道这个问题很老，但对于未来的任何人来说。在线过滤是昂贵的（计算上的），因为它直接在 DOM 上工作，如果您正在处理大量数据，超过 1000 行，最好在控制器中过滤您的集合，然后重复此操作。

于 2015-03-25T14:40:03.977 回答
4

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

于 2013-01-02T18:54:31.997 回答
0

This is not a filter but you can use a ng-hide directive evaluating the $index for the array as following:

<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>
于 2016-06-16T18:13:07.433 回答
0

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

编辑 1：摘自 John Papa Style Guide (Angular -1) - 通过委托给服务和工厂来延迟控制器中的逻辑。

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

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

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

为什么？：使控制器保持纤薄、修剪和集中。

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

于 2016-10-27T14:38:59.113 回答