Question

我已阅读此帖https://stackoverflow.com/a/18295177/6188148 但我的json看起来有点不同。这是我的json。

[{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}]

在我的案例中，

与ID和ParentID建立关系。关系可以嵌套到第n级。所以告诉我如何使用ng-repeat来显示父母和子女数据。

这样我试过

<div ng-app="myApp">
    <ul class="nav nav-pills" data-ng-controller= "MasterDetails" >
        <li
            data-ng-repeat="parent in details | filter: { ParentID: 0 }" >
            <a href="#/customers"> {{ parent.Name }} </a>
            <ul>
                <li data-ng-repeat="child in details | filter: { ParentID: parent.ID }">
                    {{ child.Name }}
                </li>
            </ul>
        </li>
    </ul>
</div>

angular.module("myApp", []).
controller("MasterDetails", ['$scope', function($scope) {
    $scope.details = [{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}];
}]);

这里是jsfiddle https://jsfiddle.net/tridip/s0svpaev/2/

上面的代码正在运行但没有得到正确的输出。 层次结构应该是这样的

Suzy
    Somi
        Romi
            Jumi
Gargi
    Sujoy
        Kamal
Joy
    Sumana
Alex

我在代码中犯了错误，我没有得到正确的输出。感谢

Answer 1

根据您的链接，我创建了此plnkr并进行了一些修改，以满足您的需求。

我刚刚在控制器中添加了 getSubPeople 函数，以获取一个代表较长父母的子数组，并立即将它们传递给子渲染指令：

我们的部分：

<ul>
    <li ng-repeat="p in peoples">
      {{p}}
      <div ng-switch on="p.ParentID > 0">
        <div ng-switch-when="true">
            <div ng-init="peoples = getSubPeople(p.ParentID);" ng-include="'partialPeoples.html'"></div>
        </div>
      </div>
    </li>
</ul>

我们的控制器：

  var app = angular.module('angularjs-starter', []);
    app.controller('MainCtrl', function($scope, $http) {

        $scope.peoples = [{"ID":1,"Name":"Suzy","ParentID":0},
                          {"ID":2,"Name":"Somi","ParentID":1},
                          {"ID":3,"Name":"Romi","ParentID":2},
                          {"ID":4,"Name":"Jumi","ParentID":3},
                          {"ID":5,"Name":"Gargi","ParentID":0},
                          {"ID":6,"Name":"Sujoy","ParentID":5},
                          {"ID":7,"Name":"Kamal","ParentID":6},
                          {"ID":8,"Name":"Joy","ParentID":0},
                          {"ID":9,"Name":"Sumana","ParentID":8},
                          {"ID":10,"Name":"Alex","ParentID":0}];

       $scope.getSubPeople = function(parentId) {
       var arr = [];
       for(var i=parentId; i>0 ; i--){
           arr.push($scope.peoples[i-1]);
         }
         return arr;
       }

    });

Answer 2

假设包括 jQuery 和不关心选择性能，这个anwser可以满足您的要求。

＆＃13;

angular.module('app', [])
  .controller('appCtrl', function($scope) {
    $scope.data = [{
      "ID": 1,
      "Name": "Suzy",
      "ParentID": 0
    }, {
      "ID": 2,
      "Name": "Somi",
      "ParentID": 1
    }, {
      "ID": 3,
      "Name": "Romi",
      "ParentID": 2
    }, {
      "ID": 4,
      "Name": "Jumi",
      "ParentID": 3
    }, {
      "ID": 5,
      "Name": "Gargi",
      "ParentID": 0
    }, {
      "ID": 6,
      "Name": "Sujoy",
      "ParentID": 5
    }, {
      "ID": 7,
      "Name": "Kamal",
      "ParentID": 6
    }, {
      "ID": 8,
      "Name": "Joy",
      "ParentID": 0
    }, {
      "ID": 9,
      "Name": "Sumana",
      "ParentID": 8
    }, {
      "ID": 10,
      "Name": "Alex",
      "ParentID": 0
    }];
  })
.directive('tree',function($filter){
  return {
    restrict:'EA',
    scope:{
      data:'='
    },
    link:function(scope,element,attrs){
      scope.data = $filter('orderBy')(scope.data,'ParentID');
      var html = $('<ul id="tree-outer-0"></ul>');
      element.append(html);
      angular.forEach(scope.data,function(val,index){
        var tree = $('<li id="tree-inner-'+val.ID+'">'+val.Name+'</li>');
        var parent = $('ul#tree-outer-'+val.ParentID);
        if(parent.length){
          parent.append(tree);
        }else{
          var parents = $('li#tree-inner-'+val.ParentID);
          var parent = $('<ul id="tree-outer-'+val.ParentID+'"></ul>');
          parent.appendTo(parents).append(tree);
        }
      });
    }
  }
});

＆＃13;

<script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<div ng-app="app" ng-controller="appCtrl">
  <tree data="data"></tree>
</div>

＆＃13;

AngularJS：如何使用ng-repeat开发具有嵌套细节的master

这样我试过

2 个答案: