Question

我有一个简单的结构

 function linksRarrange($scope) {
    $scope.links = [
        {
            text: 'Menu Item 1',
            url: '#',
        },{
            text: 'Menu Item 2',
            url: '#',
            submenu: [
                {
                    text: 'Sub-menu Item 3',
                    url: '#',
                },{
                    text: 'Sub-menu Item 4',
                    url: '#',
                    submenu: [
                        {
                            text: 'Sub-sub-menu Item 5',
                            url: '#',
                        },{
                            text: 'Sub-sub-menu Item 6',
                            url: '#',
                        }
                    ]
                }
            ]
        },{
            text: 'Menu Item 3',
            url: '#',
        }
    ];
}

我希望建立一个表格，让孩子们在父母之后连续呈现孩子，例如：

菜单项1

菜单项2

子菜单第3项

子菜单第4项

子菜单第5项

子菜单第6项

菜单项3

<table>
<thead>
  <tr>
     <th>Title</th>
     <th>Url</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>Menu Item 1</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Menu Item 2</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 3</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 4</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 5</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 6</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Menu Item 3</td>
     <td>#</td>
  </tr>
 </tbody>
</table>

我看过使用ng-repeat-start和ng-repeat-end，但这并不支持我想做的事。

有人可以提供任何帮助吗？

Answer 1

如果您使用它进行导航，可以将它放在嵌套的<ul>和我们很好的CSS中进行样式设置。类似的东西：

<ul ng-repeat="menu in links">
  <li>{{menu.text}}</li>
  <ul ng-repeat="subs in menu.submenu">
    <li>{{subs.text}}</li>
  </ul>
<ul>

......类似的东西

Answer 2

看看这些资源：

https://groups.google.com/forum/#!msg/angular/TbpjE-5XEM0/yUi8wqc7sWoJ

http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/

我认为第一个链接中的第一个示例可以满足您的需求。

这绝对不是第一次提出这个问题而且我认为如果不是直接打击你正在寻找的东西，你可以找到更多这些例子。

Answer 3

我目前的解决方案并不完美，实际上生成的html不是table / tr，而是一组nest ul / li元素，然后使用css设置样式来模拟设计规范。

因果因素是由于在指令中放置tbody和tr的问题。如果有人有解决方法，我将非常感谢您分享这个。

简单标记如下：

<menucollection menucollection='links'></menucollection>

由2个指令支持：

window.app.directive('menucollection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            menucollection: '='
        },
        template: "<ul><menuitem ng-repeat='menuitem in menucollection' menuitem='menuitem'></menu></ul>"
    }
});

window.app.directive('menuitem', function ($compile{
    return {
        restrict: "E",
        replace: true,
        scope: {
            menuitem: '='
        },
        template: "<li>{{menuitem.Name}}</li>",
        link: function (scope, element, attrs) {
            scope.catMarker = attrs.marker;
            scope.subcatMarker = attrs.marker + ' »  ';

            if (scope.menu.Children.length > 0) {
                element.append('<menucollection menucollection="menu.submenu"></menucollection>');
                $compile(element.contents())(scope);
            }
        }
    };
});

angularjs中的.after（）（嵌套的ng-repeat递归迭代）

3 个答案: