javascript – AngularJS重复节中多次调用的函数

我遇到了一个问题,我想绑定到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],{ day: $scope.days[4],hours: 2 },{ day: $scope.days[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>

原文地址：https://www.jb51.cc/js/158924.html