Angularjs does not allow you to create ul recursively within li?

Question

How can I create that deep structure with ng-repeat? I'm having problems with tags that are automatically closed in this directive.

can anybody help me?

<ul>
    <li>A
        <ul>
            <li>B
                <ul>
                    <li>C
                       <ul><li>D</li></ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

here is the json code.

{"obj":[{"code":"0","name":"A"},{"code":"1","name":"B"},
    {"code":"2","name":"C"},{"code":"3","name":"D"}]}

Thanks in advance.

do a search for "angular recursive tree" and similar terms. Should find numerous results. Post what you currently have. Using `ng-if` and `ng-repeat` and some mapping of your data into nested structure with uniform child array names there shouldn't be any closing tag issues — charlietfl, Jan 24 '18 at 21:40
The given examples have a different structure (http://benfoster.io/blog/angularjs-recursive-templates see this). When I use template, I do not have a new array to read in there. is the same array. That's where I lose myself. — elciospy, Jan 24 '18 at 22:00

score -1 · Answer 1 · answered Jan 24 '18 at 22:07

Here is my code

<script type="text/ng-template" id="categoryTree">
            <!-- {{ncm | json}} = { "tipo": "SECAO", "codigo": "XV", "nome": "METAIS COMUNS E SUAS OBRAS", "notas": [ 87 ] } -->
            {{ncm.codigo}}
            <ul>
                <li ng-include="'categoryTree'"></li>
            </ul>
</script>
<ul>   
    <li ng-repeat="ncm in vm.nomenclaturaList.ancestrais" ng-include="'categoryTree'" ng-hide="$first"></li>
</ul>

score -1 · Answer 2 · answered Jan 25 '18 at 03:34

Here is the code to verify

https://jsfiddle.net/elciospy/ps3xby70/10/

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <ul>
        <li ng-repeat="data in data" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-controller="TreeController">
    <li ng-repeat="data in tree.obj" ng-include="'tree_item_renderer.html'"></li>
</ul>

controller

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {

    $scope.tree = {"obj":[{"code":"0","name":"A"},{"code":"1","name":"B"},
    {"code":"2","name":"C"},{"code":"3","name":"D"}]}
}]);

Angularjs does not allow you to create ul recursively within li?

2 Answers2