данные реляционной базы данных с использованием ngrepeat

Я хочу показать данные в формате parent-child (bu_name) с помощью angularJs, я использовал ng-repeat, но он не работает в режиме paren-child, пожалуйста, дайте подсказку или объясните, как решить Эта проблема?данные реляционной базы данных с использованием 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-повторить его.

Разбор динамический, ng-repeat в этом примере не является, однако, если вам нужно, чтобы это было динамичным, для этого на SO существует множество других решений. Это, однако, решает вашу основную проблему.

Контроллер

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>

Edit: Обновленный plnkr с новыми данными.

источник

2016-06-28 14:40:00

спасибо @john, но это не дает результат в результате, представленном на изображении. данные child_s - дочерний ребенок –

@UdayMalangave Это потому, что в исходных данных вы предоставили мне элемент с bu_id 7 с parent_id 5. Пожалуйста, проверьте мое новое решение. –

Спасибо и еще один вопрос вы знаете, как создать неограниченный список вложенных? –

данные реляционной базы данных с использованием ngrepeat

ответ

Смежные вопросы