Counting visible elements in ng-repeat - angularjs

Question

I want to know the number of visible elements shown after being subject to an ng-if and ng-show. Here is a simplified example:
$scope.fruits = [
{ name: 'apple', shape: 'round', color: 'red' },
{ name: 'stop sign', shape: 'pointy', color: 'red' },
{ name: 'orange', shape: 'round', color: 'orange' },
{ name: 'tomato', shape: 'round', color: 'red'}
];
<ul>
<li ng-repeat="fruit in fruits" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
</ul>
Is there a way to count the resulting number of items being shown?

Answer 1

I ended up not using the ng-if or ng-show at all, and just filtered the ng-repeat. This way, I did not have to hide anything and was easily able to get the length of the results.
<ul>
<li ng-repeat="fruit in fruits | filter:myFilter | filter:{shape:'round'} as filteredFruits">{{fruit.name}}</li>
{{filteredFruits.length}} fruits
</ul>
$scope.myFilter = function(x) {
if (x.color == 'red') {
return x;
}
}

Answer 2

With this you can remove your custom filter and use as keyword to get the li length.
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.fruits = [
{ name: 'apple', shape: 'round', color: 'red' },
{ name: 'stop sign', shape: 'pointy', color: 'red' },
{ name: 'orange', shape: 'round', color: 'orange' },
{ name: 'tomato', shape: 'round', color: 'red'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
<ul>
<li ng-repeat="fruit in fruits| filter:{'shape':'round', 'color':'red'}" >{{fruit.name}}</li>
</ul>
</div>

Answer 3

try this
<ul>
<li ng-repeat="fruit in fruits | notEmpty as Items" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
</ul>
<p>Number of Items: {{Items.length}}</p>

Answer 4

You can count number of items,
$scope.fruits = [
{ name: 'apple', shape: 'round', color: 'red' },
{ name: 'stop sign', shape: 'pointy', color: 'red' },
{ name: 'orange', shape: 'round', color: 'orange' },
{ name: 'tomato', shape: 'round', color: 'red' }
];
$scope.FindVisible = function () {
var visibleObject=0;
$scope.fruits.forEach(function (v, k) {
if (v.shape == 'round' && v.color == 'red') {
visibleObject = visibleObject + 1;
}
});
alert(visibleObject);
}
<ul>
<li ng-repeat="fruit in fruits" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
<button ng-click="FindVisible()">Find</button>
</ul>