角度アプリケーションに特定のカテゴリの配列の.lengthを表示するには

Question

タブが開いている各コンテナのアイテムの量を示す一連のタブがあります。下のフィルタが表示されます。そして、私は内部にオブジェクトの量を表示したいと思いますfiltered.length私は思います。ここで

は私のデータである。ここでは

[ 
{ 
    "img":"assets/images/gallery/girls-1.jpg", 
    "group": "girls", 
    "title": "Image 1", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/girls-2.jpg", 
    "group": "girls", 
    "title": "Image 2", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/girls-3.jpg", 
    "group": "girls", 
    "title": "Image 3", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-1.jpg", 
    "group": "music", 
    "title": "Image 4", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-2.jpg", 
    "group": "music", 
    "title": "Image 5", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-3.jpg", 
    "group": "music", 
    "title": "Image 6", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-4.jpg", 
    "group": "music", 
    "title": "Image 7", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-5.jpg", 
    "group": "music", 
    "title": "Image 8", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-1.jpg", 
    "group": "nature", 
    "title": "Image 9", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-2.jpg", 
    "group": "nature", 
    "title": "Image 10", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-3.jpg", 
    "group": "nature", 
    "title": "Image 11", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-4.jpg", 
    "group": "nature", 
    "title": "Image 12", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-5.jpg", 
    "group": "nature", 
    "title": "Image 13", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-6.jpg", 
    "group": "nature", 
    "title": "Image 14", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-7.jpg", 
    "group": "nature", 
    "title": "Image 15", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/space-1.jpg", 
    "group": "space", 
    "title": "Image 16", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/space-2.jpg", 
    "group": "space", 
    "title": "Image 17", 
    "desc": "Description", 
    "link":"" 
} 
] 

は、ページのscrenshotです。 各タブの番号に注目してください。その数は、そのカテゴリに含まれる画像の数を示し、その後、その数が右側に表示されます。しかし、その部分はすでに完了しています。私はちょうどそれらの数値をプログラムで表示したい。

そして、ここでは私のフィルタリングされたHTML

<ul ng-init="tab = 1" class="list-group"> 
     <li ng-class="{active:panel.isSelected(1)}"> 
      <a class="list-group-item" ng-click="panel.selectTab(1); groupFilter = {}">All 
      <span class="badge badge-primary">{{galleries.length}}</span></a> 
     </li> 
     <li ng-class="{active:panel.isSelected(2)}"> 
      <a class="list-group-item" ng-click="panel.selectTab(2); groupFilter ={group:'nature'}">Nature 
      <span class="badge badge-success"><!--The amount of items of group Nature. 7 --></span></a> 
     </li> 
     ... 


    </ul> 

事前にみんなに感謝です。角度を教えるそれはあなたが関数に渡されたグループの長さを与える

{{categoryLength("nature")}} 

：として

Answer 1

$scope.categoryLength = function(category) { 
    var count = 0; 
    angular.forEach($scope.category_array, function(item){ 
     count += item.group == category ? 1 : 0; 
    }); 
    return count; 
} 

関数を呼び出します。

Answer 2

それは_.countBy（$ scope.category_array、 'グループ'） `と同じくらい簡単です。これはlodashで

{ girls: 3, music: 5, nature: 7, space: 2 }