在AngularJS重复节中多次调用函数

  • Z时代
  • 2024-01-10
  • 分类：问答

我遇到了一个问题，我想绑定到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>

以上是 在AngularJS重复节中多次调用函数 的全部内容， 来源链接： utcz.com/qa/410849.html

回到顶部