CODEWITHSUNDEEP
javascriptarraysangularjsmultidimensional-array
Marc Rasmussen
Marc Rasmussen

Reputation: 20555

ng-repeat uknown number of items

Okay this seems fairly odd but i am allowing my users to create any number of category / subcategories they want

When i pull the category data out it might look something like this:

enter image description here

as you can see from the above example the sub categories can have subcategories this list tree could go on forever.

Now trying to make the menu i have a simple list:

    <ul class="nav dker">
    <li ui-sref-active="active">
        <a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
            <span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
        </a>
    </li>
</ul>

The issue here is that i don't know how many times i have to repeat the subcategories which makes it impossible for me to know when to check for it?

i hope you know where im going with this how can i make a reliable list that follows the array pattern above when i don't know how many levels there are?

Upvotes: 1

Views: 95

Answers (1)

csbarnes
csbarnes

Reputation: 1893

You are going to want to create a recursive template which will essentially look something like this:

<div data-ng-include="'displaySubcategory.html'"></div>

where displaySubcategory.html contains the ng-repeat and a recursive call to itself.

<div data-ng-repeat="category in category.subcategories">
    <h1>{{category.name}}</h1>
    <div data-ng-include="'displaySubcategory.html'"></div>
</div>

The idea is that everytime you call ng-repeat you are creating a scope around the child element, so a call to {{category}} will display the lowest level (current child) of the tree/data structure.

Upvotes: 2

Related Questions