ng-repeat 在相邻列表或无限嵌套列表上

Question

我正在创建一个重复的标题列表，其中可以无限嵌套 headers。我的测试数据如下：

使用 ng-repeat 我试图让表格看起来像这样：

1 - Background
2 - Legal Requirements
2.1 - State Legal Requirements
2.1.1 - Regulations
4 - Quiz
3 - Site Security

我想出了代码 JSFiddle 当我运行它时，我得到了一个无限循环。感谢我能否获得有关如何获得上述结果的帮助，在此先感谢！

我的 JsFiddle。 JsFiddle

Answer 1

您可以通过以下两个关键步骤完成此操作：

处理控制器中的数据以创建嵌套的递归数据结构。
使用递归ng-include渲染这个嵌套结构

这是标记：

<div ng-controller="mainCtrl">
    <button ng-click="listFn()">Generate list</button>
    <ul>
        <li ng-repeat="heading in headings" ng-include="'subheader'"></li>
    </ul>      
</div>
<script type="text/ng-template" id="subheader">
    <span class="number">{{heading.id}}</span>
    <span class="heading">{{heading.text}}</span>
    <ul>
        <li ng-repeat="heading in heading.children" ng-include="'subheader'"></li>
    </ul>
</script>

这是控制器代码。请注意，我使用了强大的 Lodash 库来简化此操作：

function mainCtrl($scope) {
    $scope.data = [{
        head_id: 'Background',
        parent_head_id: 0,
        sort_order: 1
    },
    // ... more here ...
    {
        head_id: 'State Legal Requirements',
        parent_head_id: 'Legal Requirements',
        sort_order: 1
    }]
    $scope.listFn = function () {
        var byParentHeadId = _.groupBy($scope.data, 'parent_head_id');

        function headingLevel(parent_head_id, levelPrefix) {
            return _.chain(byParentHeadId[parent_head_id])
                .sortBy('sort_order')
                .map(function (heading, index) {
                    var id = levelPrefix ? levelPrefix + '.' + (index + 1) : '' + (index + 1);
                    return {
                        id: id,
                        text: heading.head_id,
                        children: headingLevel(heading.head_id, id)
                    };
                })
                .value();
        }

        $scope.headings = headingLevel(0, '');
    }
}

您可以看到它的实际效果 in this jsFiddle。

ng-repeat 在相邻列表或无限嵌套列表上

ng-repeat on adjacent list or infinite nested list

angularjs

ng-repeat