如何在angular应用程序中显示具有特定类别的数组的.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":""
}
]

这是该页面的快照。 在每个选项卡中集中于该数字 。 该数字显示该类别中有多少图像，随后，这将在右侧显示多少图像。 但是这部分已经完成。 我只想以编程方式显示这些数字。

这是我的过滤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>

在此先感谢大家。 自学角度。

Answer 1

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

将该函数称为：

{{categoryLength("nature")}}

它给出了传递给函数的组的长度。

Answer 2

尝试这个

var counts ={};
for(var i = 0 ; i < items.length ; i++) {
  counts[items[i].group] = counts[items[i].group] ?   counts[items[i].group]+1 : 1;
}
console.log(counts);

这将打印

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