web-dev-qa-db-ja.com

フィルタリングされたng-repeatデータの長さを表示する方法

私は多くのオブジェクト（JSONフォーマット）を含むデータ配列を持っています。この配列の内容として、次のものが想定されます。

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

今、私はこれらの詳細を表示します。

<div ng-repeat="person in data | filter: query">
</div

ここでは、照会は、ユーザーが表示されるデータを制限できる入力フィールドにモデル化されています。

さて、現在表示している人/人の現在の数を表示する別の場所、つまりShowing {{data.length}} Personsがあります。

私がやりたいことは、ユーザーが人物を検索し、表示されているデータがクエリに基づいてフィルタリングされると、Showing...personsも現在表示されている人物の値を変更することです。しかし、それは起こっていません。フィルタリングされたデータではなく、常にデータ内の総人数が表示されます。フィルタリングされたデータの数を取得するにはどうすればよいですか。

javascriptangularjs
421
user109187

Angular 1.3+ の場合（@Tomへの貸方）

エイリアス式（ドキュメント： Angular 1.3.0：ngRepeat を使用し、引数セクションまでスクロールします）。

<div ng-repeat="person in data | filter:query as filtered">
</div>

1.3より前のAngularの場合

結果を新しい変数（filteredなど）に割り当ててアクセスします。

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

結果数を表示します。

Showing {{filtered.length}} Persons

のような例をいじる 。クレジットは Pawel Kozlowski に移動します

728
Wumms

完全を期すために、前の答え（コントローラー内の目に見える人々の計算を実行する）に加えて、以下の例のようにHTMLテンプレートでその計算を実行することもできます。

あなたの人々のリストがdata変数にあり、あなたがqueryモデルを使用して人々をフィルタリングすると仮定すると、以下のコードはあなたのために働くでしょう：

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>
  • {{data.length}} - 総人数を表示します
  • {{(data|filter:query).length}} - フィルタをかけた人数の印刷

注 あなたがフィルタリングされたデータを使いたいなら、この解決策はうまくいくことに注意してください 一度だけ - ただし、フィルタリングされたデータを複数回使用すると、アイテムを表示し、フィルタされたリストの長さを表示するには、AngularJS 1.3+ または@Wummsで提案されている解決策として エイリアス式 （後述）の使用をお勧めします。 1.3より前のAngularJSバージョンの場合。

Angular 1.3の新機能

AngularJSの作成者は、この問題に気付き、バージョン 1.3（beta 17） でフィルタを適用した後のリピータの中間結果を格納する "alias"式を追加しました。

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

別名式 を使用すると、複数のフィルタ実行の問題を回避できます。

それが役立つことを願っています。

325
Tom

あなたが持っているなら最も簡単な方法

<div ng-repeat="person in data | filter: query"></div>

フィルタリングされたデータ長

<div>{{ (data | filter: query).length }}</div>
34
ionescho

ngRepeatはフィルタを適用するときに配列のコピーを作成するので、フィルタ処理された要素のみを参照するためにソース配列を使用することはできません。

あなたのケースでは、 $filter serviceを使ってコントローラの中にフィルタを適用するほうが良いかもしれません：

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

それから、代わりにビューでfilteredDataプロパティを使用します。ここに働くPlunkerがあります： http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

34
Josh David Miller

AngularJS 1.3以降、エイリアスを使用できます。

item in items | filter:x as results

そしてどこかに：

<span>Total {{results.length}} result(s).</span>

docs ：から

また、フィルタが適用された後にリピータの中間結果を格納するオプションのエイリアス式を指定することもできます。通常、これはリピーター上でフィルターがアクティブであるが、フィルター処理された結果セットが空の場合に、特別なメッセージをレンダリングするために使用されます。

たとえば、次のようになります。結果としてfilter：xは、繰り返しアイテムのフラグメントを結果として格納しますが、アイテムがフィルタを通して処理された後に限られます。

29
WelcomeTo

フィルタをグループ化することで複数レベルの結果を保存できることにも注意してください。

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

これが デモフィドルです

24
JeremyWeir

これがうまくいった例です Plunkerを見てください

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});
13
Maksym

あなたは 2つの方法でそれをすることができます 。 In template およびin Controller 。テンプレートでは、フィルタを適用した配列を別の変数に設定してから、必要に応じて使用できます。これを行う方法は次のとおりです。

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

例が必要な場合は、 AngularJsのフィルタ付きカウントの例/デモ を参照してください。

9
Hazarapet Tunanyan