使用ngrepeat关系数据库数据

我想使用angularJs以父 - 子（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不是，但是如果你需要这个也是动态的，那么在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>

编辑：用新的数据更新plnkr。

来源

2016-06-28 14:40:00

谢谢@john，但它没有提供图像中提供的结果。 child_s数据是孩子的孩子 –

@UdayMalangave这是因为在原始数据中，您向我提供了带有bu_id 7的元素的parent_id 5.请检查我的新解决方案。 –

谢谢和另一个问题，你会知道如何创建无限的嵌套列表？ –

使用ngrepeat关系数据库数据

回答

相关问题