angular tree grid

by Guddu Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<div ng-app="app">  
   <div ng-controller="treeController" class="container">
       <div class="row">
           <h2>ng-repeat recursive list example</h2>
           
           
           
           
           
           <ul>
               <li ng-repeat="item in tree" ng-include="'treeItem'"></li>
           </ul>
           
           
            <script type="text/ng-template" id="treeItem">
            {{item.name}}
      		
        <ul ng-if="item.children">
        
       
           <li ng-repeat="item in item.children" ng-include="'treeItem'">
           </li>
       	</ul>
       
    </script>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
       </div>
       <div class="row">
           <h2>ng-repeat tree grid example</h2>
           <table class="table table-striped">
                <thead>
                    <tr>
                        <td>ID </td>
                        <td>Name</td>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr ng-init="path=path+'/'+item.name" ng-repeat="item in tree | filterTreeItem:itemId:isExpend">
                        <td>
                            <span style="padding-left: {{item.level * 30}}px;">
                                <span class="glyphicon" ng-click="itemClick(item.id, item.expend);"
                                  ng-class="{'glyphicon-minus': !item.leaf && item.expend, 'glyphicon-plus': !item.leaf && !item.expend, 'glyphicon-leaf': item.leaf}">
                                </span>
                                {{item.id}}{{path}}
                            </span>
                        </td>
                       ...

JavaScript

/**
 * Created by hjzheng on 2015/4/14.
 */
angular.module('app', []).controller('treeController', function($scope){
    $scope.tree = [
        { id: 1, name: 'John', score: 130, city: 'New York', birthday: '1980/2/5',
            children:[
                { id: 6, name: 'John2', score: 82, city: 'San Fran1', birthday: '1990/1/21'},
                { id: 7, name: 'John2', score: 81, city: 'San Fran2', birthday: '1990/1/22',
                    children:[{ id: 8, name: 'John3', score: 89, city: 'San Francisco', birthday: '1990/1/21'}]
                }
            ]
        },
        { id: 2, name: 'Alice', score: 123, city: 'Washington', birthday: '1984/3/7'},
        { id: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '1986/10/8'},
        { id: 4, name: 'Mike', score: 100, city: 'London', birthday: '1988/8/12'},
        { id: 5, name: 'Tom', score: 89, city: 'San Francisco', birthday: '1990/1/21',
            children: [
                { id: 9, name: 'Tom1', score: 77, city: 'San Francisco', birthday: '1990/1/21'},
                { id: 10, name: 'Tom2', score: 85, city: 'San Francisco', birthday: '1990/1/21'},
                { id: 11, name: 'Tom3', score: 83, city: 'San Francisco', birthday: '1990/1/21'}
            ]
        }
    ];

    $scope.itemId = 1;
    $scope.isExpend = true;

    $scope.itemClick = function (id, expend) {
        $scope.itemId = id;
        $scope.isExpend = !expend
    };

}).filter('filterTreeItem', function(){
    function recursive(obj, newObj, level, itemId, isExpend) {
  
        console.log(obj, newObj, level, itemId, isExpend)
        angular.forEach(obj, function (o) {
          debugger
            if(o.children && o.children.length !=0){
                o.level = level;
                o.leaf = false;
                newObj.push(o);
                if(o.id == itemId) {
                    o.expend = isExpend;
                }
                if(o.expend == true) {
                    recursive(o.children,...