ngrepeatを使用したリレーショナルデータベースデータ

angleJsを使用して親子（bu_name）形式でデータを表示したいが、ng-repeatを使用していますが、親子関係では動作しません。解決方法を教えてくださいこの問題？ngrepeatを使用したリレーショナルデータベースデータ

 var businessData = [{ 
     "bu_id": 2, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "qhhjqqw", 
     "created_date": "2016-05-31 10:58:06", 
     "updated_date": "2016-05-31 10:58:06", 
     "parent_id": null 
    }, { 
     "bu_id": 3, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "kqjjk", 
     "created_date": "2016-05-31 10:58:12", 
     "updated_date": "2016-05-31 10:58:12", 
     "parent_id": 2 
    }, { 
     "bu_id": 5, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "parent", 
     "created_date": "2016-06-28 08:32:34", 
     "updated_date": "2016-06-28 08:32:34", 
     "parent_id": null 
    }, { 
     "bu_id": 6, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child", 
     "created_date": "2016-06-28 08:32:48", 
     "updated_date": "2016-06-28 08:32:48", 
     "parent_id": 5 
    }, { 
     "bu_id": 7, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child_s child", 
     "created_date": "2016-06-28 08:33:16", 
     "updated_date": "2016-06-28 08:33:16", 
     "parent_id": 6 
    }];

出典

2016-06-28 Uday Malangave

私の回答は参考になりましたか、もっと助けが必要でしたか？ –

私は

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Application</title> 
    <script src="lib/Angular/angular.min.js" type="text/javascript" ></script> 
</head> 
<body> 

<div ng-controller="mycontroller"> 
<div class="container"> 
<br/> 
<div class="row well"> 
    <div class="col-md-3"> 
     <h3>Search</h3> 
    </div> 
    <div class="col-md-6"> 
      <input type="text" class="form-control" ng-model="search" placeholder="Enter Search word"/> 
    </div> 

</div> 
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0"> 
     <thead> 
      <tr> 
       <th>bu_id</th> 
       <th>tenant_id</th> 
       <th>company_id</th> 
       <th>bu_name</th> 
       <th>Date</th> 

      </tr> 
     </thead> 

     <tbody> 
      <tr ng-repeat="item in jsondata | filter:search"> 
       <td>#{{item.bu_id}}</td> 
       <td>{{item.tenant_id}}</td> 
       <td>{{item.company_id}}</td> 
       <td>{{item.bu_name}}</td> 
       <td>{{item.created_date}}</td> 
      </tr>  
     </tbody> 
      </table> 

</div> 
</div> 
<script> 
var app = angular.module("myApp", []); 

app.controller("mycontroller", ['$scope','$http', function($scope, $http) 
     {  

       $scope.jsondata =[{ 
     "bu_id": 2, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "qhhjqqw", 
     "created_date": "2016-05-31 10:58:06", 
     "updated_date": "2016-05-31 10:58:06", 
     "parent_id": null 
    }, { 
     "bu_id": 3, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "kqjjk", 
     "created_date": "2016-05-31 10:58:12", 
     "updated_date": "2016-05-31 10:58:12", 
     "parent_id": 2 
    }, { 
     "bu_id": 5, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "parent", 
     "created_date": "2016-06-28 08:32:34", 
     "updated_date": "2016-06-28 08:32:34", 
     "parent_id": null 
    }, { 
     "bu_id": 6, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child", 
     "created_date": "2016-06-28 08:32:48", 
     "updated_date": "2016-06-28 08:32:48", 
     "parent_id": 5 
    }, { 
     "bu_id": 7, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child_s child", 
     "created_date": "2016-06-28 08:33:16", 
     "updated_date": "2016-06-28 08:33:16", 
     "parent_id": 5 
    }]; 


     }] 
); 
</script> 
</body> 
</html>

出典

2016-06-28 11:24:13

ありがとうございますが、イメージを通して私が望むものを手に入れることができると思います。。。前もって感謝します。。 –

作業例を持っている私は、角で扱いやすいですツリー構造、にデータを解析したシンプルなplunkrを作りました。次に、それを単に繰り返すことができます。

解析は動的ですが、この例のng-repeatは動的ではありませんが、これを動的にする必要がある場合は、他にも多くのソリューションがあります。しかし、これはあなたの主な問題を解決します。

コントローラ

app.controller('MainCtrl', function($scope) { 
    $scope.businessData = [{ 
     "bu_id": 2, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "qhhjqqw", 
     "created_date": "2016-05-31 10:58:06", 
     "updated_date": "2016-05-31 10:58:06", 
     "parent_id": null 
    }, { 
     "bu_id": 3, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "kqjjk", 
     "created_date": "2016-05-31 10:58:12", 
     "updated_date": "2016-05-31 10:58:12", 
     "parent_id": 2 
    }, { 
     "bu_id": 5, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "parent", 
     "created_date": "2016-06-28 08:32:34", 
     "updated_date": "2016-06-28 08:32:34", 
     "parent_id": null 
    }, { 
     "bu_id": 6, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child", 
     "created_date": "2016-06-28 08:32:48", 
     "updated_date": "2016-06-28 08:32:48", 
     "parent_id": 5 
    }, { 
     "bu_id": 7, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "child_s child", 
     "created_date": "2016-06-28 08:33:16", 
     "updated_date": "2016-06-28 08:33:16", 
     "parent_id": 5 
    }]; 

    $scope.parseData = function() { 
     $scope.businessDataCopy = []; 

     for(var i = 0, len = $scope.businessData.length ; i < len ; i++) { 
     // If the data has no parent, then it is a parent 
     if(!$scope.businessData[i].parent_id) { 
      $scope.businessDataCopy[ $scope.businessData[i].bu_id ] = $scope.businessData[i]; 
     // Otherwise it is a child, push it to the parent 
     } else { 
      if(!$scope.businessDataCopy[ $scope.businessData[i].parent_id ].children) { 
      $scope.businessDataCopy[ $scope.businessData[i].parent_id ].children = []; 
      } 
      $scope.businessDataCopy[ $scope.businessData[i].parent_id ].children.push($scope.businessData[i]); 
     } 
     } 
     $scope.businessDataCopy = $scope.businessDataCopy.filter(function(n){ return n !== undefined }); 
    } 
    $scope.parseData(); 
});

Htmlの

<body ng-controller="MainCtrl"> 
    <ul> 
     <li ng-repeat="data in businessDataCopy track by $index"> 
     {{data.bu_name}} 
     <ul> 
      <li ng-repeat="d in data.children"> 
      {{d.bu_name}} 
      </li> 
     </ul> 
     </li> 
    </ul> 
</body>

編集：新しいデータでplnkrを更新しました。

出典

2016-06-28 14:40:00

@johnありがとうございますが、画像で提供された結果として結果を提供していません。 child_sデータは子供の子供です –

@UdayMalangaveこれは元のデータでbu_id 7の要素を私に提供したからです。私の新しい解決策を確認してください。 –

ありがとうございますと別の質問あなたは無制限の入れ子リストを作成する方法を知っていますか？ –

ngrepeatを使用したリレーショナルデータベースデータ

答えて

関連する問題