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はpipesを使用しますが、フィルターのように見えます:

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

この質問は古いことは知っていますが、将来の誰にとっても. 1000 行以上の大量のデータを処理している場合は、DOM で直接動作するため、行内でのフィルタリングは (計算上) コストがかかります。コントローラーでコレクションをフィルター処理してから、代わりにそれを繰り返す方がはるかに優れています。

于 2015-03-25T14:40:03.977 に答える
4

コントローラーまたはサーバー側でページネーションを処理します。私の推測では、ng-repeat は、監視する必要があるものだけではなく、リスト全体を監視しているため、非常に遅くなります。

于 2013-01-02T18:54:31.997 に答える
0

CRUD は、コントローラーではなく、ファクトリまたはサービスで処理する必要があります。私の理解では、コントローラーはビューとサービス間の通信のみを担当します。

編集 1: John Papa Style Guide からの抜粋 (Angular -1) - サービスとファクトリに委譲することにより、コントローラーのロジックを延期します。

なぜ ?: ロジックは、サービス内に配置され、関数を介して公開されると、複数のコントローラーによって再利用される場合があります。

なぜ ?: サービスのロジックは単体テストで簡単に分離できますが、コントローラーの呼び出しロジックは簡単にモックできます。

なぜ ?: 依存関係を削除し、コントローラーから実装の詳細を非表示にします。

なぜ ?: コントローラーをスリムに、すっきりと、そして焦点を絞った状態に保ちます。

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

于 2016-10-27T14:38:59.113 に答える