Question

我正在处理树状结构数据。父母可能有不确定数量的孩子，这些孩子可能有不确定数量的孩子等等。我有一个漂亮的嵌套结构的JSON格式。但是，当我构建我的角度模板时，我如何解释不确定性？

这是我的尝试：

<div ng-repeat="object in manhole.data">

  <div ng-if="object.object"
       ng-repeat="childObject in object.object">

    <div ng-if="childObject.object"
         ng-repeat="childChildObject in childObject.object"></div>

  </div>

</div>

到目前为止，这仅适用于最大深度为2的树结构。

Answer 1

你不能只用ng-repeat。

你最好的机会是使用一个在找到新孩子时自我筑巢的指令。

这是我用来创建具有不确定数量的子级别的菜单的旧指令，我希望它可以对您有所帮助：http://plnkr.co/edit/8JL0Op?p=preview
可能有更好的方法（当我还在学习Angular的时候我这样做了）但我认为你可以从这里得到这个想法

代码：

angular.module('app', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
 $scope.name = "Test";
 $scope.values = [
   {"name":"test1"},
   {"name":"test2", children:[
     {"name":"test21"}, 
     {"name":"test22"}, 
     {"name":"test23", children:[
     {"name":"test231"}, 
     {"name":"test232"}, 
     {"name":"test233"}
   ]}
   ]},
   {"name":"test3"},
   ];
}]);

angular.module('app').directive('hyMenu', function($compile) {
  return {
    restrict: 'A',
    scope:{
        menuList:"=hyMenu"
    },
    link: function(scope, element, attrs) {},
    templateUrl: function(element ,attrs) {
        if(attrs.sub=="true"){
            return 'hy-sub.htm';
        } else {
            return 'hy-menu.htm';
        }
    }
  };
}).directive('hyElement', function($compile) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs, menuCtrl) {
      if(!scope.elem.children){
                scope.elem.children=[];
        }
        if (scope.elem.children.length > 0){
          console.log(scope.elem.children); 
            element.append("<ul hy-menu='elem.children' data-sub='true'></ul>");
            $compile(element.contents())(scope);
        }
    },
    templateUrl:  function(element, attrs) {
        return 'hy-elem.htm';
    }
  };
});

模板：

的index.htm

<div class="hy-menu" hy-menu="values"></div>

HY-menu.htm

<ul>
    <li ng-repeat="elem in menuList" hy-element="elem"></li>
</ul>

HY-sub.htm

<li ng-repeat="elem in menuList" hy-element="elem"></li>

HY-elem.htm

{{elem.name}}

Angular ng-repeat指令与不确定数量的子对象有关

1 个答案: