gpt4 book ai didi

javascript - Angularjs ng-repeat 过滤器计数变量?

转载 作者:行者123 更新时间:2023-12-03 11:27:34 26 4
gpt4 key购买 nike

我正在创建一个树形 View ,显示员工尚未填写、已开始或完成的表格数量。可以有多个嵌套级别。

举个简单的例子,行是:

2014 年:缺失:3,开始=7,完成=7

约翰·多伊:缺失=2,开始=3,完成=5

菲尔·史密斯:缺失=1,开始=4,完成=2

如果我过滤员工怎么办?然后我希望丢失、开始和完成的计数更改年份行。如何使用 ng-repeat 动态计算这些变量?

最佳答案

您希望在 Controller 中计算小计。您的问题是您希望根据 View 上应用的过滤器更新小计。您可以通过将 $filter 注入(inject) Controller 来实现此目的。

看看这里的 plunk:http://plnkr.co/edit/JwUOzm5u3G7379I1W6hk?p=preview

我在输入框中创建了一个过滤器。尝试更改文本,小计会相应更新。在本例中,我在 View 和 Controller 中都使用“过滤器”过滤器,以便 View 和小计同时更新。

代码如下:

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />

<script src="script.js"></script>
</head>

<body ng-app="app">


<div ng-controller="mainCtrl as main">
<input type="text" ng-model="main.empName" placeholder="name filter">
<div ng-repeat="year in main.data">
{{year.yearNum}}:{{main.calculateTotal(year.yearNum)}}
<div ng-repeat="employee in year.employees|filter:main.empName">
{{employee.name}} : {{employee.cost}}
</div>
</div>
</div>



<script>
angular.module('app',[])
.controller('mainCtrl',function($filter){
var main=this;

main.calculateTotal=function(yearNum){
var data=main.data;
var total=0;
for(var i=0;i<data.length;i++){
if(data[i].yearNum==yearNum)
{
var employees=$filter('filter')( main.data[i].employees, main.empName );
for(var j=0;j<employees.length;j++){
total+=employees[j].cost;
}
}
}
return total;
}


main.data=[
{
yearNum:2012,
employees:[
{
name:"jane",
cost:200
},
{
name:"jow",
cost:400
}
]
},
{
yearNum:2013,
employees:[
{
name:"jane",
cost:250
},
{
name:"jow",
cost:450
}
]
}

];
});
</script>
</body>

</html>

关于javascript - Angularjs ng-repeat 过滤器计数变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26857300/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com