在 AngularJS 中，ng-repeat 是一个非常强大且常用的指令，用于循环遍历数组或对象，并生成对应的 HTML 元素。在前端开发中，我们经常需要展示列表数据，ng-repeat 可以帮助我们快速、方便地实现这个功能。
基本语法
ng-repeat 指令的基本语法如下：
---- --- --------------- -- --------- ---- ------- -----
在上面的例子中，ng-repeat 指令会遍历 items 数组，并为每个元素生成一个 li 标签，显示对应的 item 内容。item 是一个临时变量，用来表示当前循环的元素。
过滤器
除了基本的循环遍历，ng-repeat 还支持使用过滤器对数据进行过滤和排序。例如，我们可以按照特定条件过滤出符合要求的元素：
---- --- --------------- -- ----- - ------- ------ ----------- ---- ------- -----
上面的例子中，只会显示 name 属性为 'John' 的元素。
嵌套循环
ng-repeat 还支持嵌套循环，可以在一个 ng-repeat 指令内部再嵌套一个 ng-repeat 指令，实现多层循环遍历。例如：
----
--- ---------------- -- --------
-- ---------- --
----
--- --------------- -- --------------- ---- -------
-----
-----
-----在上面的例子中，groups 是一个数组，每个元素包含一个 name 和一个 items 数组，我们首先遍历 groups 数组，然后在每个 group 中再遍历对应的 items 数组。
track by
在 ng-repeat 指令中，可以使用 track by 关键字指定一个唯一标识符，用来提高性能并避免重复渲染。例如：
---- --- --------------- -- ----- ----- -- ----------- ---- ------- -----
在上面的例子中，我们使用 item.id 作为唯一标识符，确保在数据发生变化时能够正确更新 DOM，而不是重新渲染整个列表。
总结
通过 ng-repeat 指令，我们可以轻松实现列表数据的展示和循环遍历，同时支持过滤、排序和嵌套循环等功能，极大地提高了前端开发的效率和灵活性。希望本文对你有所帮助，欢迎继续探索 AngularJS 的更多强大功能！