我如何在递归有未知的层次与角度JS对象循环?递归、层次、角度、对象

2023-09-13 04:04:57 作者:扣扣个性女生大全

所以借这个例子:

http://jsfiddle.net/7U5Pt/

在这里,我有一个描述(非常基本的)菜单的对象。每个项目可以有多个孩子有层次潜在无限的水平。我使用的是把它的 NG-重复指令到< UL><李> 元素做工精细前两个水平,但不为第三或层次结构的任何后续水平

什么是比这个对象递归遍历,处理儿童无限水平的最好方法是什么?

任何帮助非常AP preciated!

这里的code柜面小提琴消失:

HTML

 < D​​IV NG-应用=对myApp>< D​​IV NG控制器=myCtrl>    <导航类=导航左>        < UL NG重复=,在mytree.items项目>            <立GT;名称:{{item.name}}                < UL NG重复=,在item.children.items项目>                    <立GT;子名称:{{item.name}}< /李>                < / UL>            < /李>        < / UL>    < / NAV>< / DIV> 

JS:

  VAR对myApp = angular.module('对myApp',[]);myApp.controller('myCtrl',函数($范围){  $ scope.mytree = {  项目:[{    名:一,    孩子:{      项目:        {          名:一个子一个          孩子:{            项目:[{              名:一个子级两个            },            {              名:一分二级B            }]          }        },        {          名:一分B        }      ]    }  },  {    名:两节  },  {    名:三化  },  {    名:四有,    孩子:{      项目:[{        名:四个子一      },      {        名:四个子B      }]    }  },  {    名:十二五  }]};}); 
js算法入门 3 递归

解决方案

所以,事实证明,最好的方式做到这一点,有兴趣的人士,与角递归助手在这里:

https://github.com/marklagendijk/angular-recursion

这允许你递归调用NG-复读功能。因此,在你看来,是这样的:

 <树家庭=mytree>< /树> 

和再定义一个指令,对于像这样自称:

  .directive('树',函数(RecursionHelper){  返回{    限制:E,    适用范围:{FAMILY:'='},    模板:      {{family.name}}'+      '< UL NG-IF =family.children>' +      '<李NG重复=孩子family.children>' +      '<树家庭=孩子>< /树>' +      '< /李>' +      '&所述; / UL>',    编译:函数(元素){      返回Recu​​rsionHelper.compile(元);   } };}); 

显然递归助手必须停止某种无限循环的事情,如所讨论的here.由于@arturgrzesiak的链接!

So take this example:

http://jsfiddle.net/7U5Pt/

Here I've got an object that describes a (very basic) menu. Each item can have multiple children with potentially unlimited levels of hierarchy. The ng-repeat directives I'm using to turn it into <ul><li> elements work fine for the first two levels, but not for the third or any subsequent level of the hierarchy.

What's the best way to recursively iterate over this object, dealing with unlimited levels of children?

Any help much appreciated!

Here's the code incase the fiddle goes away:

HTML:

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <nav class="nav-left">
        <ul ng-repeat="item in mytree.items">
            <li>NAME: {{ item.name }}
                <ul ng-repeat="item in item.children.items">
                    <li>SUB NAME: {{ item.name }}</li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

JS:

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {
  $scope.mytree = {
  "items": [{
    "name": "one",
    "children": {
      "items": [
        {
          "name": "one sub a",
          "children": {
            "items": [{
              "name": "one sub level two a"
            },
            {
              "name": "one sub level two b"
            }]
          }
        },
        {
          "name": "one sub b"
        }
      ]
    }
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four",
    "children": {
      "items": [{
        "name": "four sub a"
      },
      {
        "name": "four sub b"
      }]
    }
  },
  {
    "name": "five"
  }]
};
});

解决方案

So it turns out that the best way to do this, for anyone interested, is with the angular-recursion helper here:

https://github.com/marklagendijk/angular-recursion

This allows you to call the ng-repeat function recursively. So in your view, something like:

<tree family="mytree"></tree>

and then define a directive for that calls itself like so:

.directive('tree', function(RecursionHelper) {
  return {
    restrict: "E",
    scope: {family: '='},
    template: 
      '{{ family.name }}'+
      '<ul ng-if="family.children">' + 
      '<li ng-repeat="child in family.children">' + 
      '<tree family="child"></tree>' +
      '</li>' +
      '</ul>',
    compile: function(element) {
      return RecursionHelper.compile(element);
   }
 };
});

Apparently the recursion helper is necessary to stop some sort of infinite loop thing, as discussed here. Thanks to @arturgrzesiak for the link!