javascript - Looping through deep objects in ng-repeat -

i'm in angular , have object this.

var items = [{     title: 'something',     children: [         { title: 'hello world' },         { title: 'hello overflow' },         { title: 'john doe', children: [             { title: 'amazing title' },             { title: 'google it' },             { title: 'i'm child', children: [                 { title: 'another ' },                 { title: 'he\'s brother' },                 { title: 'she\'s mother.', children: [                     {title: 'you never know if i'm going have children'}                 ]}             ]}         ]}     ] }]; 

i wan't loop through of these have this.

    • something

       • hello world

       • hello overflow

       • john doe

          • amazing title

          • google it

          • i'm child

              •

              • he's brother

              • she's mother

                  • never know if i'm going have children

the problem wouldn't know how deep object go or what's in it. wouldn't able manually. have done basic loop ng-repeat in fiddle provided @ bottom, can't figure out how can automatically loop through these , create nested <ul>'s , <li>'s.

what best way accomplish this?

demo: http://jsfiddle.net/xtglm/

here go:

html

<div ng-app="app" ng-controller="test">    <ul>        <li nested-item ng-repeat="item in items">{{item.title}}</li>    </ul>          </div> 

javascript

var items = [{     title: 'something',     children: [         { title: 'hello world' },         { title: 'hello overflow' },         { title: 'john doe', children: [             { title: 'amazing title' },             { title: 'google it' },             { title: 'im child', children: [                 { title: 'another ' },                 { title: 'he\'s brother' },                 { title: 'she\'s mother.', children: [                     {title: 'you never know if im going have children'}                 ]}             ]}         ]}     ] }];  var app = angular.module('app', []);  app.controller('test', function( $scope ) {     $scope.items = items; });   app.directive('nesteditem', ['$compile', function($compile){     return {         restrict: 'a',         link: function(scope, element){         console.log(element);             if (scope.item.children){                 var html = $compile('<ul><li nested-item ng-repeat="item in item.children">{{item.title}}</li></ul>')(scope);                 element.append(html);             }         }     }; }]); 

i forked fiddle:

http://jsfiddle.net/c4kp8/

actually must confess master morality's approach can go custom directive. key thing know if go route need intercept on item level manually check if current item has children, , if so, $compile directive node yourself.

update

however, there 1 thing should bother in above code. duplication of html code (inlined in directive) code smell. if like, can funky , fix introducing generic template-code directive doesn't else providing code of node applied on template other directives.

so our solution this:

html

<div ng-app="app" ng-controller="test">    <ul template-code>        <li nested-item ng-repeat="item in items">{{item.title}}</li>    </ul>          </div> 

javascript

var items = [{     title: 'something',     children: [         { title: 'hello world' },         { title: 'hello overflow' },         { title: 'john doe', children: [             { title: 'amazing title' },             { title: 'google it' },             { title: 'im child', children: [                 { title: 'another ' },                 { title: 'he\'s brother' },                 { title: 'she\'s mother.', children: [                     {title: 'you never know if im going have children'}                 ]}             ]}         ]}     ] }];  var app = angular.module('app', []);  app.controller('test', function( $scope ) {     $scope.items = items; });  app.directive('templatecode', function(){     return {         restrict: 'a',         controller: function(){},         compile: function(element){             element.removeattr('template-code');             //attention: need trim() here. otherwise angularjs raises exception             //later when want use templatecode in $compile function.              //be aware assume modern browser              //that ships trim function.             //it's easy secure polyfill.             var templatecode = element.parent().html().trim();             return function(scope, ielement, iattrs, controller){                 controller.templatecode = templatecode;             }         }     } });  app.directive('nesteditem', ['$compile', function($compile){     return {         restrict: 'a',         require: '^templatecode',         link: function(scope, element, iattr, controller){              if (scope.item.children){                 scope.items = scope.item.children;                          var html = $compile(controller.templatecode)(scope);                 element.append(html);             }         }     }; }]); 

plunker: http://jsfiddle.net/2rqwf/