在 AngularJS 重复部分中多次调用函数 [英] Function Called Multiple Times in AngularJS Repeat Section
问题描述
我遇到了一个问题,我想绑定到 ng-repeat 循环内的函数的输出.我发现每个项目都调用了该函数两次,而不是像我期望的那样调用一次.这是 ng-repeat 部分(注意最后的 calcRowTotal() 调用):
I'm running into an issue where I want to bind to the output of a function inside of an ng-repeat loop. I'm finding that the function is being called twice per item rather than once as I'd expect. Here's the ng-repeat section (notice the calcRowTotal() call at the end):
<tr ng-repeat="row in timesheetRows">
<td>
<select ng-model="row.categoryID">
<option ng-repeat="category in categories" value="{{category.id}}">
{{category.title}}
</option>
</select>
</td>
<td ng-repeat="day in row.dayValues">
<input type="text" ng-model="day.hours" />
</td>
<td>{{calcRowTotal($index, row)}}</td>
</tr>
calcRowTotal() 函数如下所示:
The calcRowTotal() function is shown next:
$scope.calcRowTotal = function (index, row) {
console.log('calcRowTotal - Index: ' + index);
var total = 0;
for (var i = 0; i < row.dayValues.length; i++) {
var num = parseFloat(row.dayValues[i].hours);
if (isNaN(num)) {
num = 0;
//this.dayValues[i].hours = 0;
}
total += num;
}
//updateDayTotals();
return total;
}
下面显示了其中一个迭代项目的示例:
An example of one of the items being iterated through is shown next:
{
categoryID: 2,
dayValues: [
{ day: $scope.days[0], hours: 5 },
{ day: $scope.days[1], hours: 0 },
{ day: $scope.days[2], hours: 3 },
{ day: $scope.days[3], hours: 0 },
{ day: $scope.days[4], hours: 2 },
{ day: $scope.days[5], hours: 5 },
{ day: $scope.days[6], hours: 8 }
]
}
我在控制台中看到以下内容(我正在循环的集合中目前有两个项目):
I'm seeing the following in the console (two items are currently in the collection I'm looping through):
calcRowTotal - Index: 0
calcRowTotal - Index: 1
calcRowTotal - Index: 0
calcRowTotal - Index: 1
我当然可以创建一个rowTotal"属性,但更愿意绑定到上面显示的函数提供的实时"数据.希望重复是我遗漏的一些简单的东西,所以我感谢任何关于为什么我看到重复的反馈.作为旁注,随着其中一个文本框中的数据发生变化,我也需要更新行总数,因此我可能需要一种不同的方法.有兴趣首先了解这种特殊情况....绝对不想要重复,因为可能有很多行.
I could certainly make a "rowTotal" property but would prefer to bind to "live" data provided by the function shown above. Hopefully the duplication is something simple I'm missing so I appreciate any feedback on why I'm seeing the duplication. As a side note, as data in one of the textboxes changes I need to update the row totals as well so it may be I need a different approach. Interested in understanding this particular situation first though....definitely don't want the duplication because there could be a lot of rows potentially.
这是一个例子:http://jsfiddle.net/dwahlin/Y7XbY/2/
推荐答案
这是因为你在这里绑定了一个函数表达式:
It's because you're binding to a function expression here:
<td>{{calcRowTotal($index, row)}}</td>
它的作用是什么迫使在每个项目、每个摘要上重新评估该功能.您需要做的是预先计算该值并将其放入您的数组中.
What that does it force that function to be reevaluated on every item, on every digest. What you'll want to do to prevent that is pre-calculate that value and put it in your array to begin with.
一种方法是在您的阵列上设置监视:
One way to do that is to set up a watch on your array:
$scope.$watch('timesheetRows', function(rows) {
for(var i = 0; i < value.length; i++) {
var row = rows[i];
row.rowTotal = $scope.calcRowTotal(row, i);
}
}, true);
然后你所要做的就是绑定到那个新值:
Then all you have to do is bind to that new value:
<td>{{row.rowTotal}}</td>
这篇关于在 AngularJS 重复部分中多次调用函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!