CODEWITHSUNDEEP
angularjs
George Sharvadze
George Sharvadze

Reputation: 570

AngularJS: how to build nested divs?

How can I build the following structure using ng-repeat? Solution must support an arbitrary depth...

I've played with ng-repeat-start & ng-repeat-end but without any luck so far. Any hint is greatly appriciated

<div>1
   <div>2
       <div>3</div>
   </div>
</div>

Upvotes: 1

Views: 360

Answers (1)

jbrown
jbrown

Reputation: 3025

It can be accomplished through a directive that leverages ng-repeat to render values from nested objects. See it working here.

Directive

app.directive('divRepeater', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    template: '<ul></ul>',
    scope: {
      obj: '='
    },
    link: function(scope, element) {
      var el = angular.element('<span/>');
      el.append('<li>' + scope.obj.id + '</li>');
      if (scope.obj.nestedObjs) {
        var nestedObjs = angular.toJson(scope.obj.nestedObjs);

        /// remove quotes from property names
        nestedObjs = nestedObjs.replace(/\"([^(\")"]+)\":/g, "$1:");

        var nestedDir = "<div ng-init='nestedObjs=" + nestedObjs + "'><div-repeater ng-repeat='nestedObj in nestedObjs track by $index' obj='nestedObj'></div-repeater></div>";
        el.append(nestedDir);
      }
      $compile(el)(scope);
      element.append(el);
    }
  };
});

Controller

app.controller('MainCtrl', function($scope) {
  $scope.objs = [{
    id: '1',
    nestedObjs: [{
      id: 'a'
    }, {
      id: 'b',
      nestedObjs: [{
        id: 'i'
      }, {
        id: 'ii'
      }]
    }]
  }, {
    id: '2'
  }, {
    id: '3',
    nestedObjs: [{
      id: 'a',
      nestedObjs: [{
        id: 'i'
      }]
    }, {
      id: 'b',
      nestedObjs: [{
        id: 'i'
      }, {
        id: 'ii'
      }]
    }]
  }];
});

Markup

<div-repeater ng-repeat="obj in objs track by $index" obj="obj"></div-repeater>

Upvotes: 1

Related Questions