2016-08-06 8 views
0

をNG-IFを満たした後、私はコードの行を持っている:カウントの繰り返しとショーのカウントは一度しかngのリピートAngularJSで

<div ng-repeat="ticket in scope.tickets track by $index" ng-if="ticket.film_id == film.id"> {{$index}} Ticket(s)</div> 

現在、これは、インデックスを示し、div要素を繰り返しますが、私はのカウントをしたいですそれぞれの代わりに、私はそれが最後に次のようになりますように、各NG-IFのための最後のカウントを表示したい:

4 Ticket(s) 
2 Tickets(s) 
3 Tickets(s) 

任意のアイデア?ありがとう。私はあなたの質問から得たもの

+0

データを実行するコントローラーで正面を変えるか、工場をもっと良くする...偶然、ロダッシュを使用していますか? – shaunhusain

+0

ng-repeatを使ってifを渡す要素を数えていますか? ここで説明されているように、フィルタを使用して実行できます。http://stackoverflow.com/questions/26087509/angularjs-count-filtered-items?answertab=votes#tab-top – imazzara

+0

詳細を入力してください。あなたは入れ子にされた 'ngRepeat'ですか?あなたもソースを追加することができれば素晴らしいだろう。 – developer033

答えて

0

さて、あなたはネイティブfilterを使用することができますので、インナーngRepeat内のオブジェクトをカウントしようとしているということです。

あなただけ以下のように、as式を使用してfiltered項目の結果を属性する必要があります。

<div ng-repeat="ticket in tickets | filter: { film_id: film.id }: true as filtered track by $index"> 

ここ簡単なデモです:

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('app', []) 
 
    .controller('MainCtrl', MainCtrl); 
 

 
    MainCtrl.$inject = ['$scope']; 
 

 
    function MainCtrl($scope) { 
 
    $scope.films = []; 
 
    $scope.tickets = [ 
 
     { 
 
      "film_id":"id 1", 
 
      "name":"ticket 1" 
 
     }, 
 
     { 
 
      "film_id":"id 1", 
 
      "name":"ticket 2" 
 
     }, 
 
     { 
 
      "film_id":"id 1", 
 
      "name":"ticket 3" 
 
     }, 
 
     { 
 
      "film_id":"id 1", 
 
      "name":"ticket 4" 
 
     }, 
 
     { 
 
      "film_id":"id 2", 
 
      "name":"ticket 5" 
 
     }, 
 
     { 
 
      "film_id":"id 2", 
 
      "name":"ticket 6" 
 
     }, 
 
     { 
 
      "film_id":"id 3", 
 
      "name":"ticket 7" 
 
     }, 
 
     { 
 
      "film_id":"id 3", 
 
      "name":"ticket 8" 
 
     }, 
 
     { 
 
      "film_id":"id 3", 
 
      "name":"ticket 9" 
 
     } 
 
    ]; 
 
    
 
    // 4 Films with id = 1, 3 films with id = 3, 2 films with id = 2 
 

 
    function loadFilms(max) { 
 
     var i = 0; 
 
     while(i++ < max) { 
 
     $scope.films.push({ 
 
      "id": "id " + i, 
 
      "name": "film " + i 
 
     }) 
 
     } 
 
    } 
 

 
    loadFilms(10); 
 
    } 
 
})();
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="film in films track by $index"> 
 
    <span ng-bind="film.id"></span> 
 
    <div ng-repeat="ticket in tickets | filter: { film_id: film.id }: true as filtered track by $index"> 
 
    </div> 
 
    <!-- to show 0 tickets just remove the ng-if check below --> 
 
    <span ng-if="filtered.length" ng-bind-template="{{filtered.length}} Ticket(s)"></span> 
 
    </div> 
 
</body> 
 

 
</html>

は、
+0

これは私が探していた答えでした。ありがとうございました。 – joshuar500

関連する問題