我遇到了一个问题,我想绑定到ng-repeat循环内的函数的输出。我发现该函数每个项目被调用两次,而不是我期望的那样。这是ng- repeat部分(请注意最后的calcRowTotal()调用):
<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()函数如下所示:
$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; }
接下来显示其中一个要迭代的项目的示例:
{ 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 } ] }
我在控制台中看到以下内容(我正在遍历的集合中当前有两项):
calcRowTotal - Index: 0 calcRowTotal - Index: 1 calcRowTotal - Index: 0 calcRowTotal - Index: 1
我当然可以做一个“ rowTotal”属性,但希望绑定到上面显示的函数提供的“实时”数据。希望重复项是我所缺少的简单东西,因此,我感谢收到关于为什么看到重复项的任何反馈。附带说明一下,由于其中一个文本框中的数据发生了更改,因此我也需要更新行总数,因此可能需要使用其他方法。不过,有兴趣首先了解这种特殊情况。…绝对不希望重复,因为可能存在很多行。
这是一个示例:http : //jsfiddle.net/dwahlin/Y7XbY/2/
这是因为您在此处绑定到函数表达式:
<td>{{calcRowTotal($index, row)}}</td>
它的作用是在每个项目,每个摘要上重新评估该功能。为防止这种情况,您需要做的是预先计算该值并将其放入数组中。
一种方法是在阵列上设置手表:
$scope.$watch('timesheetRows', function(rows) { for(var i = 0; i < value.length; i++) { var row = rows[i]; row.rowTotal = $scope.calcRowTotal(row, i); } }, true);
然后,您要做的就是绑定到该新值:
<td>{{row.rowTotal}}</td>