在 Angular 中使用 ng-repeat 指令实现树形菜单的方法

引言

在前端开发中，树形菜单是非常常见的一个组件。实现树形菜单的方法有很多种，其中一种简便的方法是使用 Angular 的 ng-repeat 指令。本文将详细介绍如何使用 ng-repeat 指令实现树形菜单，并提供示例代码以供参考。

实现方法

数据准备

首先，我们需要准备一些模拟的数据来模拟树形菜单结构。我们可以使用 JSON 格式的数据来实现，例如：

// javascriptcn.com 代码示例
$scope.menuItems = [
    {
        "id": 1,
        "text": "菜单1",
        "parentID": null,
        "children": [
            {
                "id": 2,
                "text": "子菜单1-1",
                "parentID": 1,
                "children": [
                    {
                        "id": 3,
                        "text": "子菜单1-1-1",
                        "parentID": 2,
                        "children": []
                    },
                    {
                        "id": 4,
                        "text": "子菜单1-1-2",
                        "parentID": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": 5,
                "text": "子菜单1-2",
                "parentID": 1,
                "children": []
            }
        ]
    },
    {
        "id": 6,
        "text": "菜单2",
        "parentID": null,
        "children": [
            {
                "id": 7,
                "text": "子菜单2-1",
                "parentID": 6,
                "children": []
            }
        ]
    }
];

其中，每一个菜单项都有以下属性：

• id：菜单项的唯一标识符
• text：菜单项的文本
• parentID：菜单项的父级标识符，如果当前项为根节点，则此值为 null
• children：包含该菜单项的子级菜单项的数组，如果该菜单项没有子菜单，则此数组为空

HTML 结构

构建树形菜单的 HTML 核心结构非常简单，我们只需要使用 ng-repeat 指令来遍历菜单项即可。HTML 代码如下所示：

// javascriptcn.com 代码示例
<ul>
    <li ng-repeat="menuItem in menuItems | filter:{parentID: null}" ng-include="'menuItem_tmpl'"></li>
</ul>

<script type="text/ng-template" id="menuItem_tmpl">
    <a>{{menuItem.text}}</a>
    <ul ng-if="menuItem.children.length>0">
        <li ng-repeat="child in menuItem.children" ng-include="'menuItem_tmpl'"></li>
    </ul>
</script>

我们首先使用 ng-repeat 指令来遍历所有父级菜单项（即 parentID 为 null 的菜单项），然后每个菜单项内部递归引用自己，以此构建整个树形菜单。在每个菜单项内部，我们使用了 ng-if 来判断该菜单项是否需要显示子菜单，如果该菜单项没有子菜单，则此行显示不存在。（示例代码中存在菜单项不止一个的例子，为了保证代码易读性并不全部展示）

CSS 样式

为了让树形菜单产生层次感，我们需要使用 CSS 样式来实现缩进某些菜单项，样式如下：

// javascriptcn.com 代码示例
ul {
    list-style: none;
}

ul li {
    padding: 5px 10px;
    border: 1px solid #f2f2f2;
}

ul li ul {
    margin-left: 10px;
    margin-top: 5px;
}

总结

我们可以看到，使用 ng-repeat 指令实现树形菜单非常简单，代码实现也非常优雅。使用这种方法不仅可以提高前端开发效率，还可以让代码更加易于维护和扩展。希望本文对大家学习和使用 Angular 框架有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f950a7d4982a6eb0bf52c