CODEWITHSUNDEEP
angularjs
Mou
Mou

Reputation: 16312

How to show hierarchical data in tabular format using ng-repeat

i am new in angular. so i was reading write up just to accomplish my job. this way i will try but not sure that am i going in right direction? here is my sample code

<ul>
    <li ng-repeat="parent in items">{{parent.pitem}}
        <ul>
            <li ng-repeat="child in parent.citems">{{child.pitem }}</li>
        </ul>
    </li>
</ul>

var app = angular.module('myapp', []);

app.controller('MyCtrl', function ($scope) {
    $scope.items = [{ "pitem": "Coffee", "citems": "" }, { "pitem": "Tea", "citems": [{ "pitem": "Black tea", "citems": "" }, { "pitem": "Green tea", "citems": "" }] }, { "pitem": "Milk", "citems": "" }]
});

enter image description here

i actually i need to show employee hierarchy like manager and their subordinate.

i also read this too on the same kind of topic written by @zsong https://stackoverflow.com/a/18295177/6188148

so please help me to generate tabular output with ng-repeat using ul,li and end user should be able to expand collapse rows too. please have a look at this url http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html i want similar kind of output but with ng-repeat.

see this url http://www.lidorsystems.com/support/articles/angularjs/treegrid/tree-grid-filter.aspx then can understand what kind of output i am trying to build with ng-repeat.

please guide and suggestion.

Upvotes: 2

Views: 2091

Answers (1)

Raffaeu
Raffaeu

Reputation: 7003

This JSFiddle https://jsfiddle.net/benfosterdev/NP7P5/ shows exactly what you are looking for:

Recursion

<div ng-app="app" ng-controller='AppCtrl'>
    <script type="text/ng-template" id="categoryTree">
        {{ category.title }}
        <ul ng-if="category.categories">
            <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
            </li>
        </ul>
    </script>
    <ul>
        <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
    </ul>    
</div>

Json object

$scope.categories = [
  { 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },

      {
        title: 'Desktops'
      },

      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },

  {
    title: 'Printers'
  }

];

});

Upvotes: 3

Related Questions