I am facing a challenge with converting a JSON array into HTML using angular's ng-repeat.
The JSON structure I'm working with looks like:
data:{
thing_one:[{
id:1,
fields:[{ .... }]
},
{
id:2,
fields:[{ .... }]
}],
separate_thing:[{
id:1,
fields:[{ .... }]
},
{
id:2,
fields:[{ .... }]
}]
}
In the controller for that page, I have:
The following code snippet:
MockFields.get(function(data){
$scope.thing_one = data.thing_one;
$scope.separate_thing = data.separate_thing;
}
In my HTML template, it is structured as follows:
<div class="details">
<div class="my_header">
<h2>Thing 1</h2>
</div>
<div class="thing_one">
<dynamic-form fields="thing_1[0].fields"><dynamic-form>
</div>
</div>
<div class="details">
<div class="my_header">
<h2>Separate Thing</h2>
</div>
<div class="separate_thing" ng-repeat="thing in separate_thing>
<dynamic-form fields="thing.fields"><dynamic-form>
</div>
</div>
The issue arises when inspecting a specific element in the DOM:
<div class="details">
<div class="my_header">
<h2>Separate Thing</h2>
</div>
<div class="separate_thing" ng-repeat="thing in separate_thing></div>
<div class="separate_thing" ng-repeat="thing in separate_thing>
<div>
<label>Foo from separate thing 1</label>
<input type="text">
.....
</div>
<div>
<label>Foo from separate thing 2</label>
<input type="text">
.....
</div>
</div>
</div>
It seems that all the sub-objects (fields) are being pushed to the last <dynamic-form>, leaving the first one empty.
This behavior concerns me - could this possibly be an optimization by Angular or have I made an error somewhere? I have not encountered any errors in my code so far.
Any insights on why the sub-objects are consolidating into the last element would be greatly appreciated.