0

I have a json exactly as follow:

[{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}]

In my case, relation establish with ID and ParentID. The relation can be nested upto nth level. How to print depth when use ng-repeat to show parent and child relation.

This way i tried

<div ng-app="myApp">
    <ul class="nav nav-pills" data-ng-controller= "MasterDetails" >
        <li
            data-ng-repeat="parent in details | filter: { ParentID: 0 }" >
            <a href="#/customers"> {{ parent.Name }} </a>
            <ul>
                <li data-ng-repeat="child in details | filter: { ParentID: parent.ID }">
                    {{ child.Name }}
                </li>
            </ul>
        </li>
    </ul>
</div>

angular.module("myApp", []).
controller("MasterDetails", ['$scope', function($scope) {
    $scope.details = [{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}];
}]);

Here is jsfiddle https://jsfiddle.net/tridip/s0svpaev/2/

Hierarchy should be look like this way with depth

Suzy 0
    Somi 1
        Romi 2
            Jumi 3
Gargi 0
    Sujoy 1
        Kamal 2
Joy 0
    Sumana 1
Alex 0

Just see my code and guide me how to calculate & print depth when iterate in data like 0,1,2...so on for nested data. There should be no data for depth in json rather it should be calculated on the fly. Can we use $index here to print the depth? Looking for idea. Thanks

adranale
  • 2,835
  • 1
  • 21
  • 39
Monojit Sarkar
  • 2,353
  • 8
  • 43
  • 94
  • 1
    For recursive nesting like this, I suggest creating a custom directive. Otherwise your HTML will have a hard time defining enough nesting. – ryanyuyu May 18 '16 at 13:08
  • tell me how to calculate depth please....what code or logic i need to add there. – Monojit Sarkar May 18 '16 at 13:12
  • You should write a recursive directive that includes that information. – ryanyuyu May 18 '16 at 13:13
  • Possible duplicate of [Recursion in Angular directives](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives) – Julien May 18 '16 at 13:23
  • i will re organise the array in controller side to already have depth level and then display it – AlainIb May 18 '16 at 13:38
  • reorganise the array to have a treeview in the controller ( each node know there child ). http://ngmodules.org/modules/angular.treeview – AlainIb May 18 '16 at 13:59

0 Answers0