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

Question

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

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
        };
    });
};

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

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

Answer 1

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

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

所以 .. 你只能改变你的项目而不是创建新的:

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

然后就可以了。

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

更新

实际上，如果您在 ngRepeat 表达式之外烘焙此列表，消化将不会一遍又一遍地循环!我建议您使用 ngRepeat 指令创建的子作用域为每个 group 设置一个 Controller ，并在观察者回调中烘焙此列表。