452

多くのオブジェクト (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現在表示されている人物の値も変更することです。しかし、それは起こっていません。フィルタリングされたデータではなく、常にデータ内の合計人数が表示されます - フィルタリングされたデータの数を取得するにはどうすればよいですか?

4

8 に答える 8

757

Angular 1.3+ の場合(@Tom のクレジット)

エイリアス式を使用します(ドキュメント: Angular 1.3.0: ngRepeat、Argumentsセクションまで下にスクロールします)。

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

Angular 1.3 より前の場合

結果を新しい変数 (例: ) に割り当ててfilteredアクセスします。

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

結果の数を表示します。

Showing {{filtered.length}} Persons

同様の例をフィドルします。クレジットはPawel Kozlowskiに送られます

于 2013-10-22T12:11:55.780 に答える
337

完全を期すために、以前の回答 (コントローラー内で表示される人物の計算を実行する) に加えて、以下の例のように 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}}- フィルタリングされた人数を出力します

フィルタリングされたデータをページ内で 1 回だけ使用する場合、このソリューションはうまく機能することに注意してください。ただし、アイテムを表示したり、フィルター処理されたリストの長さを表示したりするなど、フィルター処理されたデータを複数回使用する場合は、AngularJS 1.3+ではエイリアス式(後述) を使用するか、 1.3 より前の AngularJS バージョンでは@Wummsによって提案されたソリューションを使用することをお勧めします。

Angular 1.3 の新機能

AngularJS の作成者もその問題に気付き、バージョン1.3 (ベータ 17)では、フィルターが適用された後にリピーターの中間結果を格納する「エイリアス」式を追加しました。

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

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

エイリアス式は、複数のフィルター実行の問題を防ぎます。

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

于 2013-03-13T11:26:30.327 に答える
49

あなたが持っている場合、最も簡単な方法

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

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

<div>{{ (data | filter: query).length }}</div>
于 2016-01-19T13:25:38.137 に答える
36

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

あなたの場合、$filterサービスを使用してコントローラー内でフィルターを適用することをお勧めします。

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

  $scope.filteredData = myNormalData;

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

  // ...
}

そして、filteredData代わりにビューでプロパティを使用します。これが動作中のプランカーです: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

于 2013-03-09T22:03:51.070 に答える
25

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

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>

ここにデモフィドルがあります

于 2015-04-22T17:36:50.270 に答える
13

これが実際の例です。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;
  });
});

于 2013-03-09T23:52:50.870 に答える
10

あなたは2つの方法でそれを行うことができます. テンプレート内および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 のフィルター処理されたカウントの例/デモを参照してください。

于 2016-05-18T17:37:53.103 に答える