AngularJS:在嵌套ng重复中迭代时计数

AngularJS: Count while iterating in nested ng-repeat

本文关键字：迭代 嵌套 ng AngularJS      更新时间：2023-09-26

我创建了一个angularjs应用程序，用于打印印度人口统计以及那些具有投票资格的计数值的人，

该应用程序运行良好，但我不知道如何在迭代时获得印度人和符合投票条件的计数

工作演示

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

有人能告诉我这个的一些建议吗

您的emp.country是undefined，因为emp是员工的集合。你可以这样做：

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;
};

演示

编辑

如果您不想添加循环，您确实可以使用ng-repeat来执行增量函数。

首先，您需要初始化范围中indianCounts（和voteCounts）的数组：

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

然后你需要这些功能：

$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]++;
    }
};

最后，这里是HTML和所有需要的东西：

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

这是JSFiddle更新的

我已经更新了jsFiddle。

增加了3个过滤器-1.印度人2.CanVote3.印度注意

你可以看到它在这里工作-http://jsfiddle.net/tmu9kukz/7/

过滤器

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>

相关文章：