nested ui li using ng-repeat

Question

var data = [
  {
    "id": 0,
    "name": "Will choose later"
  },
  {
    "id": 999999,
    "name": "I have my own option"
  },
  {
    "id": 1,
    "name": "Option 1",
    "list": [
        {"id": 1, "name": "Sub 1", 
        "list": [
            {"id": 1, "name": "Sub 1"},
            {"id": 2, "name": "Sub 2"},
        ]},
    ]
  },
  {
    "id": 2,
    "name": "Option 2",
    "list": [
      {"id": 1, "name": "Option 2 - Sub 1"},
      {"id": 2, "name": "Option 2 - Sub 2"},
      {"id": 3, "name": "Option 2 - Sub 3"},
    ]
  },
 ]

Here array structure is dynamic, list object may repeat more. Is it possible to create a nested ul li only using by ng-repat (only playing in html). I have tried but as list object is dynamic I couldn't make it work. I am trying in angular but will ok in jquery as well.Please suggest.

score 0 · Answer 1 · answered Jun 27 '16 at 12:47

0

<div ng-repeat="d in data">
{{d.id}}
   <div ng-repeat="l in d.list">
       {{l.name}}
   </div>
</div>

answered Jun 27 '16 at 12:47

Piyush.kapoor

6,715
1
21
21

Will not work. OP needs recursive solution, not static. – dfsq Jun 27 '16 at 12:48
@dfsq: the SO link you shared is answered at 2013, there should be better answer now – Prashobh Jun 27 '16 at 13:28
1

@parsh This is how it is typically done, I would say this is optimal solution. Others are also possible, though. – dfsq Jun 27 '16 at 13:59

nested ui li using ng-repeat

1 Answers1