引言
在前端开发中，树形菜单是非常常见的一个组件。实现树形菜单的方法有很多种，其中一种简便的方法是使用 Angular 的 ng-repeat 指令。本文将详细介绍如何使用 ng-repeat 指令实现树形菜单，并提供示例代码以供参考。
实现方法
数据准备
首先，我们需要准备一些模拟的数据来模拟树形菜单结构。我们可以使用 JSON 格式的数据来实现，例如：
-- -------------------- ---- -------
---------------- - -
-
----- --
------- ------
----------- -----
----------- -
-
----- --
------- ---------
----------- --
----------- -
-
----- --
------- -----------
----------- --
----------- --
--
-
----- --
------- -----------
----------- --
----------- --
-
-
--
-
----- --
------- ---------
----------- --
----------- --
-
-
--
-
----- --
------- ------
----------- -----
----------- -
-
----- --
------- ---------
----------- --
----------- --
-
-
-
--其中，每一个菜单项都有以下属性：
- id：菜单项的唯一标识符
- text：菜单项的文本
- parentID：菜单项的父级标识符，如果当前项为根节点，则此值为 null
- children：包含该菜单项的子级菜单项的数组，如果该菜单项没有子菜单，则此数组为空
HTML 结构
构建树形菜单的 HTML 核心结构非常简单，我们只需要使用 ng-repeat 指令来遍历菜单项即可。HTML 代码如下所示：
-- -------------------- ---- -------
----
--- ------------------- -- --------- - ----------------- ------ ----------------------------------
-----
------- ----------------------- -------------------
------------------------
--- -----------------------------------
--- ---------------- -- ------------------ ----------------------------------
-----
---------我们首先使用 ng-repeat 指令来遍历所有父级菜单项（即 parentID 为 null 的菜单项），然后每个菜单项内部递归引用自己，以此构建整个树形菜单。在每个菜单项内部，我们使用了 ng-if 来判断该菜单项是否需要显示子菜单，如果该菜单项没有子菜单，则此行显示不存在。（示例代码中存在菜单项不止一个的例子，为了保证代码易读性并不全部展示）
CSS 样式
为了让树形菜单产生层次感，我们需要使用 CSS 样式来实现缩进某些菜单项，样式如下：
-- -------------------- ---- -------
-- -
----------- -----
-
-- -- -
-------- --- -----
------- --- ----- --------
-
-- -- -- -
------------ -----
----------- ----
-总结
我们可以看到，使用 ng-repeat 指令实现树形菜单非常简单，代码实现也非常优雅。使用这种方法不仅可以提高前端开发效率，还可以让代码更加易于维护和扩展。希望本文对大家学习和使用 Angular 框架有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f950a7d4982a6eb0bf52c