3

Assume the following JSON structure, which is strongly simplified from what I am currently working with:

$scope.var1 = {
    "test1": {
        "name": "test1",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    },
    "test2": {
        "name": "test2",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    },
    "test3": {
        "name": "test3",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    }
};

$scope.var2 = {
    "test8": {
        "name": "test8",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    },
    "test2": {
        "name": "test2",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    },
    "test9": {
        "name": "test9",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    }
};

$scope.valuesVar1 = {
    "test1": {
        "value": 1
    },
    "test2": {
        "value": 2
    },
    "test3": {
        "value": 3
    },
};

$scope.valuesVar2 = {
    "test8": {
        "value": 4
    },
    "test2": {
        "value": 5
    },
    "test9": {
        "value": 6
    },
};

Var1 and Var2 represent some data, which always has the same structure. Same for valuesVar1 and valuesVar2 - they have the same structure and contain some additional information for var1 and var2.

I am trying to iterate over var1 and get the value from valuesVar1 using ng-init. On user interaction the assignment for the iteration is changed to var2, so know we are iterating over var2 and getting the values from valuesVar2.

The problem: When iterating over var2, we should get the value 5 for "test2". But since ngInit already "knows" test2 from iterating over var1, the value stays 2.

Note: Please don't give answers advising to change the JSON structure or something similar - because I am on my side not able to do this. I already tried to copy the object like proposed here: angularjs - ngRepeat with ngInit - ngRepeat doesn't refresh rendered value - but this doesn't work. I assume it is because ngInit "remembers" the string value "test2" rather than the object reference (but I don't really know it :) ).

Question: How can I get ngInit to run again on an iteration, where the same key for an object was already used in a previous iteration?

I also prepared a jsfiddle http://jsfiddle.net/S329r/6/ with the information. On running it iterates over var1 and outputs the values like this:

test1: 1
test2: 2
test3: 3

So far so good, I expect this. But when var2 is assigned for the iteration, the following shows:

test2: 2
test8: 4
test9: 6

Here I expect test2 to display the value 5. (Hint: In the jsfiddle demo, the button "Change" changes the assignment for the iteration to var2, "Change Back" changes it back to var1).

4

1 回答 1

4

一种解决方案是确保为 JSON 中的每个项目生成唯一的 ID。当然你不能像你说的那样改变你的 JSON，但你可以强制 angularJS 生成一个。

把它放在你的重复循环中：

iter in iterateOver track by $id(iter.name + iter.belongsTo)

只要数据组合是唯一的，您的循环就会正常工作。

文档中的更多信息：

例如：项目中的项目由 $id(item) 跟踪。内置的 $id() 函数可用于为数组中的每个项目分配唯一的 $$hashKey 属性。然后，此属性用作将 DOM 元素与数组中的相应项通过标识关联的键。在数组中移动相同的对象将以相同的方式在 DOM 中移动 DOM 元素。

编辑 另一个解决方案是稍微改变你的循环并且不要使用ng-init 相反，让你的值是这样的：

<div ng-repeat="iter in iterateOver " >
    {{iter.name}}: {{getValForIter(iter).value}}
</div>
于 2014-08-04T23:32:53.660 回答