AngularJS: Count while iterating in nested ng-repeat

Question

I have created an angularjs application for printing the Indian people count as well as those who have vote eligible count values,

The application is working fine but i dont know how to get indians and vote eligible counts while iterating

Working Demo

<div ng-app='myApp' ng-controller="Controller">
    <div ng-init="indiansCount = 0" ng-repeat="emp in records">
        <b>Can Vote :</b><br>
        <b>Indians :</b> {{getIndiansCount(emp.country, indiansCount)}}

        <div ng-repeat="empl in emp">
            {{empl.country}}<br>
             {{empl.employee.name}}<br>
             {{empl.employee.canVote}}
            <hr>
        </div>
    </div>
</div>

Can anyone please tell me some suggestion for this

Answer 1

Your emp.country is undefined , because emp is a collection of employees. You could do this instead:

HTML:

<b>Indians :</b> {{getIndiansCount(emp, indiansCount)}}

JS:

$scope.getIndiansCount = function(employees, count) {
    angular.forEach(employees, function(employee) {
        if(employee && employee.country === "Indian") {
            count++;
        }
    });
    return count;
};

DEMO

---

EDIT

In case you don't want to add loops, you can indeed use the ng-repeat to execute an increment function.

First you need to initialize an array for indianCounts (and voteCounts) in your scope:

app.controller('Controller', function ($scope) {
    $scope.indiansCount = []; // Like this
    $scope.voteCount = [];
    ... 

Then you need these functions:

$scope.initCount = function(i) {
    $scope.indiansCount[i] = 0;
    $scope.voteCount[i] = 0;
}

$scope.incrementCount = function(empl, i) {
    if(empl.country === "Indian") {
        $scope.indiansCount[i]++;
    }
    if(empl.employee && empl.employee.canVote === true) {
        $scope.voteCount[i]++;
    }
};

Finally, here is the HTML with all the stuff needed:

<div ng-app='myApp' ng-controller="Controller">
    <!-- Here you keep a trace of the current $index with i -->
    <div ng-init="initCount(i = $index)" ng-repeat="emp in records">
        <b>Can Vote :</b> {{voteCount[i]}}<br>
        <b>Indians :</b> {{indiansCount[i]}}

        <div ng-repeat="empl in emp" ng-init="incrementCount(empl, i)">
             {{empl.country}}<br>
             {{empl.employee.name}}<br>
             {{empl.employee.canVote}}
            <hr>
        </div>
    </div>
</div>

Here is the JSFiddle updated

Answer 2

I have updated you jsFiddle.

Added 3 filters - 1. Indian 2. CanVote 3. IndianCanVote

you can see it working here - http://jsfiddle.net/tmu9kukz/7/

Filters

 app.filter("Indian", function() { return function(records) { var totalIndianCount = 0; angular.forEach(records, function(emp, empKey) { angular.forEach(emp, function(oneEmp, oneEmpKey) { if (oneEmp.country === "Indian") { totalIndianCount += 1; } }); }); return totalIndianCount; } }); app.filter("CanVote", function() { return function(records) { var totalCanVote = 0; angular.forEach(records, function(emp, empKey) { angular.forEach(emp, function(oneEmp, oneEmpKey) { if (oneEmp.employee.canVote) { totalCanVote += 1; } }); }); return totalCanVote; } }); app.filter("IndianCanVote", function() { return function(records) { var totalCanVote = 0; angular.forEach(records, function(emp, empKey) { angular.forEach(emp, function(oneEmp, oneEmpKey) { if (oneEmp.country === "Indian" && oneEmp.employee.canVote) { totalCanVote += 1; } }); }); return totalCanVote; } }) 

HTML

  <div> Total Indians : {{records | Indian}} </div> <div> Total Can Vote : {{records | CanVote}} </div> <div> Total Can Vote : {{records | IndianCanVote}} </div>