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

Tip-Sy · Accepted Answer · 2015-01-21 10:12:55Z

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

edited Jan 21, 2015 at 10:12

answered Nov 6, 2014 at 13:48

Tip-Sy

80810 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Man Over a year ago

means again we need to iterate within the getIndiansCount method for that....how can we avoid that, also how can we print the Can Vote count

Alex Man Over a year ago

how abt the canVote count

Alex Man Over a year ago

i have done up with the canVote too jsfiddle.net/tmu9kukz/3 but the problem is can we achieve these without iteration within the function

Tip-Sy Over a year ago

Alright, I updated my answer with no loop added. Let me know if this is what you were looking for

Alex Man Over a year ago

how abt the canVote count

|

Rabi · Accepted Answer · 2014-11-06 14:08:26Z

1

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>

answered Nov 6, 2014 at 14:08

Rabi

2,23019 silver badges18 bronze badges

4 Comments

Alex Man Over a year ago

thanks for the Answer, but you have used too many forEach iteration....actually i am looking for something that can be achieved during the ng-repeat iteration itself

Alex Man Over a year ago

see this updated JSFiddle, i have achieved this using a single iteration, but still i want to avoid that forEach iteration too

Rabi Over a year ago

I don't think you are able to achieve it in a single iteration. In your case, ng-repeat is one iteration and angular.forEach is another. Our approach is just different.

Alex Man Over a year ago

anyhow we are iterating the employee using ng-repeat="empl in emp", cant we use some isolated variable for the count updation.....this is just a guess

Collectives™ on Stack Overflow

AngularJS: Count while iterating in nested ng-repeat

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related