Angularjs: Count While Iterating In Nested Ng-repeat

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 h

Solution 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:

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

        <divng-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

Solution 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>