LOTUSMS LOTUSMS - 22 days ago 6
AngularJS Question

How do I display the .length of an array with a specific category in an angular application

I have a set of tabs that show the amount of items in each container that the tabs open. You will see that filter below. And I want to show the amount of objects inside

filtered.length
I suppose.

Here is my Data:

[
{
"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":""
}
]


Here is a screnshot of the page. Focus on that number in each tab. That numbers shows how many images are in that category and subsequently, that's how many will show up on the right side. But that part is already done. I just want to show those numbers programmatically.

enter image description here

And here is my Filtered 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>


Thanks in advance guys. Teaching myself Angular.

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

Call the function as:

{{categoryLength("nature")}}

It gives the length of the group you passed to the function.