使用ng-repeat时如何获取数组的规范化值

时间:2014-02-10 22:18:14

标签: javascript angularjs angularjs-ng-repeat

我正在尝试获取与不同组关联的一个数组的规范化值。

http://jsfiddle.net/k5Dvj/5/

我不想在原始数组项中添加新内容,因此我为每个组返回标准项的新对象。

$scope.nomalizedItems = function (groupid) {
    var groupItems = $scope.originalItems.filter(function (item) {
        return item.groupid == groupid
    });

    var values = groupItems.map(function (item) {
        return item.value;
    });
    var maxValue = Math.max.apply(null, values);
    return groupItems.map(function (item) {
        return {
            id: item.id,
            normalizedValue: item.value / maxValue
        };
    });
};

我相信这个逻辑非常简单,但是即使我在ng-repeat表达式中添加了“[$rootScope:infdig] 10 $digest() iterations reached. Aborting!”,angularjs总是指责“track by item.id”。

知道如何解决这个问题吗?谢谢!

1 个答案:

答案 0 :(得分:2)

ngRepeat指令并不开心。您的代码每次都会创建新对象。消化循环一遍又一遍......

据我所知,track by expression不应该通过重新创建实体来删除所有内部$$hashKey属性后,使用相应的新实体进行角度匹配。该指令旨在告诉ngRepeat指令如何构建此内部$$hashKey以避免DOM元素创建浪费。

所以..你可能只改变你的物品而不是创造新物品:

    groupItems.forEach(function (item) {
        item.normalizedValue = item.value / maxValue;
    });
    return groupItems;

然后它有效。

此外,您的过滤发生在每个摘要循环中。出于性能目的,您可能更喜欢在特定事件/观察者回调中烘焙此数组。

更新

实际上,如果你在ngRepeat表达式之外烘焙这个列表,消化不会一遍又一遍地循环!我建议您使用group指令创建的子范围,每ngRepeat个控制器,并在观察者回调中烘焙此列表。