AngularJS:在嵌套的ng-repeat中迭代时计数

亚历克斯·曼

我创建了一个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.countryundefined,因为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更新

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

AngularJS,嵌套JSON和ng-repeat

在ng-repeat AngularJS中满足ng-if后,对迭代进行计数并仅显示一次计数

AngularJS 中带有 $index 的嵌套循环(ng-repeat)

带有ng-repeat的AngularJS中的嵌套注释

在AngularJS中对嵌套ng-repeat的元素进行排序

未选中嵌套ng-repeat中的Angularjs单选按钮

嵌套的json中的angularjs ng-repeat下拉菜单

AngularJS-如何访问嵌套的ng-repeat中的数组

AngularJS嵌套数组中的ng-repeat

Angularjs嵌套ng-repeat有条件的原因

ANgularjs:ng-repeat和嵌套的自定义指令

AngularJS:嵌套循环中$ index的ng-repeat跟踪

嵌套 ng-repeat 创建更多标签 angularjs

带有嵌套ng-repeat的AngularJS Filter数组

嵌套的ng-repeat不会出现angularjs

angularjs从父级更改ng-repeat嵌套值

Angularjs - ng-repeat 和嵌套作用域

ng-class中的AngularJS嵌套表达式

在angularjs中嵌套ng-mouseover不起作用

使用ng-repeat迭代AngularJS中的数组数组

angularjs在ng-repeat外嵌套ng-repeat子长度

angularjs-用过滤在ng-repeat中反向计数

显示的行基于在angularjs中嵌套的ng-repeat中单击特定的json数组?

从AngularJS嵌套ng-repeat中的下拉选项中获取选定的值

AngularJS-如何在ng-repeat中单击父数组时显示嵌套数组

嵌套ng-repeat中来自控制器的AngularJS访问元素

Angularjs + Laravel:在嵌套的ng-repeat中获取口才关系的属性

AngularJS嵌套ng-repeat我如何从父控制器中引用子作用域?

使用ng-repeat读取JSON AngularJs中的嵌套数组