AngularJS - reset ngInit to ngRepeat
Let's assume the following JSON structure, which is heavily simplified from what I'm 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 that always has the same structure. The 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 Var1 values using ng-init. With user interaction, the assignment for the iteration changes to var2, so be aware that we are iterating over var2 and getting values from Var2 values.
Problem : When iterating over var2, we should get a value of 5 for "test2". But since ngInit already "knows" test2 from iterating over var1, the value remains at 2.
Note . Please do not give any answers advising to change the JSON structure or anything like that - because on my side I am not able to do this. I've already tried to copy the object as suggested here: angularjs - ngRepeat with ngInit - ngRepeat doesn't update the displayed value - but that doesn't work. I assume this is because ngInit "remembers" the string value "test2" and not an object reference (but I really don't know that :)).
Question . How can I get ngInit to run again on iteration where the same key for the object was already used in the previous iteration?
I also prepared a jsfiddle http://jsfiddle.net/S329r/6/ with information. At startup, it iterates over var1 and outputs values like this:
test1: 1
test2: 2
test3: 3
So far so good, I look forward to it. But when var2 is assigned to iterate, the following is shown:
test2: 2
test8: 4
test9: 6
Here I expect test2 to display a value of 5. (Hint: in the jsfiddle demo the Change button changes the assignment for iteration to var2
, Change Back changes it to var1
).
source to share
One solution is to ensure that you generate a unique ID for each item in JSON. Of course, you cannot change your JSON as you said, but you can force angularJS to generate one.
Put this in a repeat loop:
iter in iterateOver track by $id(iter.name + iter.belongsTo)
As long as this data combination is unique, your loop will work correctly.
A little more information from the documentation:
For example: item in items tracks $ id (item). The built-in $ id () function can be used to assign a unique $$ hashKey property to each element in an array. This property is then used as a key to the associated DOM elements with the corresponding array element by ID. Moving the same object in the array will move the DOM element in the same way in the DOM.
EDIT
Another solution is to modify your loop a bit and not use ng-init
Get your values like this instead:
<div ng-repeat="iter in iterateOver " >
{{iter.name}}: {{getValForIter(iter).value}}
</div>
source to share