I have a set of JSON data that I would like to display in a nested list:
The JSON comes in the following format:
["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]]
The html should be:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ul>
I don't have control of the JSON, and it may be deeper than 2 levels.
Of course, I tried this:
<ul>
<li ng-repeat="item in data">{{item}}</li>
</ul>
but it doesn't work because for nested items, it simply displays the json.
How can I achieve nested lists in AngularJs?
Fiddle: http://jsfiddle.net/m7ax7tsa/
I found a solution thanks to zsong and Blackhole.
Resulting HTML:
<div ng-app="testApp">
<div ng-controller="TestCtrl">
<script type="text/ng-template" id="/nestedList.html">
<ul>
<li ng-repeat="item in data">
<div ng-switch="isString( item )">
<div ng-switch-when="true">{{item}}</div>
<div ng-switch-when="false">
<!-- Recursive template!! -->
<div ng-include="'/nestedList.html'" ng-init="data = item">
</div>
</div>
</div>
</li>
</ul>
</script>
<div ng-include="'/nestedList.html'"></div>
</div>
</div>
I used a recursive template which included itself. It borrows heavily on the answer of Unknown number of sublists with AngularJS. In addition, I had to add the following code to the controller:
$scope.isString = function (item) {
return typeof item === "string";
};
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments