Question

我想使用angularJs以父子（bu_name）格式显示数据，我使用了ng-repeat，但它不是以paren-child的方式工作，请给出提示或解释如何解决这个问题问题

     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
    }];

Answer 1

我有一个工作示例

<!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>

Answer 2

我创建了一个简单的plunkr，它将数据解析为树结构，使用Angular更容易处理。然后你可以简单地重复它。

解析是动态的，本例中的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。

使用ngrepeat的关系数据库数据

2 个答案: