Check out this fiddle for accurate information, though it may not be visually positioned correctly:
I am working with a three-dimensional JSON object.
The first level of array items should be displayed in a single line, which is currently working fine...
Similarly, the second layer of selected sub-array data is also displayed in a line when the top array item is checked.
I have been successful in displaying the third layer as well, but I need the sub-items to be directly below their parent array item...
Although my current code is close to what I need, I am struggling to isolate the specific sub-array items for the selected element. As of now, the selected sub-array is displaying multiple times instead of just once...
This is my existing code snippet:
<div ng-repeat="publication in publicationData">
<ul>
<li>
<input type="checkbox" name="pubCat" ng-model="publication.selected">
{{publication.pubName}}
</li>
</ul>
</div>
<br/><br/>
<div ng-repeat="publication in publicationData | filter:{selected:true}" >
<div>
<ul id="publists">
<li ng-repeat="category in publication.pubCat">
<input type="checkbox" name="pubCat" ng-model="category.selected">{{category.pubCatName}}
<!-- The following code displays the same array multiple times -->
<div ng-repeat="publication in publicationData">
<div ng-repeat="category in publication.pubCat | filter:{selected:true}">
<div>
<ul>
<li ng-repeat="subcategory in category.pubSubCat">
<input type="checkbox" name="pubSubCat">{{subcategory.pubSubCatName}}
</li>
</ul>
</div>
</div>
</div;
<!-- Above code displays the same array multiple times -->
</li>
</ul>
</div>
</div>
I understand why this issue is happening, but I'm unsure how to correct it to achieve the desired result.
Can you suggest an approach to create a layout like the following example: if "Option 1" is checked in the first array and "SubOpt 1 B" is checked in the second?
|_| Option 1 |_| Option 2 |_| Option 3
|_| SubOpt 1 A |_| SubOpt 1 B |_| SubOpt 1 C
|_| SubSubOptB 1
|_| SubSubOptB 2
|_| SubSubOptB 3
|_| SubSubOptB 4