node tree from json data using angularjs using recursive function

Question

I want to create a node tree from a json.

index.html should load node tree recursively from person.json and now the method is going into infinite loop. please help me.

app.js

(function() {
  var app = angular.module("app", ['directive.cusTree', 'directive.cnode']);
  app.controller("Contrl", function($scope, $http) {
    $scope.some = function() {
      return $http.get('person.json').success(function(data) {
        $scope.nodetree = data;
        return data;
      });
    }
  });
})();

person.json

{
  "person": [{
      "id": 1,
      "name": "A1" ,
      "child": [{
        "id": 1.1,
        "name": "A11",
        "child": [{
          "id": 1.11,
          "name": "A111"
        }, {
          "id": 1.12,
          "name": "A112"
        }, {
          "id": 1.13,
          "name": "A113"
        }]
      }, {
        "id": 1.2,
        "name": "A12"
      }, {
        "id": 1.3,
        "name": "A13",
        "child": [{
          "id": 1.31,
          "name": "A131"
        }, {
          "id": 1.32,
          "name": "A132"
        }, {
          "id": 1.33,
          "name": "A133"
        }]
      }]
    }, {
      "id": 2,
      "name": "B2" 
    }, {
      "id": 3,
      "name": "C3" 
    }, {
      "id": 4,
      "name": "D4" 
    }



  ]
}

item.html

<div ng-click="show(show)" ng-init="show=true" class="container" ng-repeat="node in nodedata" ng-if="nodedata.length>0">
  <ul>
    {{node.name}}
    <br>
    <div ng-if="node.child.length>0">
        <custree nodedata="node.child"> </custree>
    </div>
  </ul>
</div>

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="cusTree.js" type="text/javascript"></script>
   <script src="cnode.js" type="text/javascript"></script>

</head>

<body>

  <div ng-controller="Contrl as n">


    <div ng-init="nodetree=some()">
      <div ng-repeat="node in nodetree">



          <div class="container">

         <custree nodedata="node"> </custree>

        </div>
          <br>
      </div>

    </div>

  </div>

</body>

</html>

cusTree.js

angular.module('directive.cusTree',[])
.directive('custree',function(){

return{
  restrict :'E',
  scope: {

    nodedata:'='

  },
  templateUrl:"item.html",
  controller:function($scope){
//console.log("new="+ JSON.stringify($scope.nodedata));


  }

};




});

Amit Thakkar · Accepted Answer · 2015-07-24 09:58:27Z

If you are creating tree with AngularJS, you have to create 2 directives as below:

app.directive('nodeTree', function () {
  return {
    template: '<node ng-repeat="node in tree"></node>',
    replace: true,
    restrict: 'E',
    scope: {
      tree: '=children'
    }
  };
});
app.directive('node', function ($compile) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'partials/node.html', // HTML for a single node.
    link: function (scope, element) {
      /*
       * Here we are checking that if current node has children then compiling/rendering children.
       * */
      if (scope.node && scope.node.children && scope.node.children.length > 0) {
        var childNode = $compile('<ul class="tree" ng-if="!node.visibility"><node-tree children="node.children"></node-tree></ul>')(scope);
        element.append(childNode);
      }
    },
    controller: ["$scope", function ($scope) {
      // This function is for just toggle the visibility of children
      $scope.toggleVisibility = function (node) {
        node.visibility = !node.visibility;
      };
      // Here We are marking check/un-check all the nodes. 
      $scope.checkNode = function (node) {
        node.checked = !node.checked;
        function checkChildren(c) {
          angular.forEach(c.children, function (c) {
            c.checked = node.checked;
            checkChildren(c);
          });
        }
        checkChildren(node);
      };
    }]
  };
});

For More details you can checkout Github Link, its have working demo.

Collectives™ on Stack Overflow

node tree from json data using angularjs using recursive function

app.js

person.json

item.html

index.html

cusTree.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

person.json

item.html

index.html

cusTree.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related