在前端开发中，展示数据是一个很重要的任务。而 Angular.js 中的 ng-repeat 指令可以帮助我们快速地展示数据，是一个非常强大和常用的指令。本文将对 ng-repeat 进行详细的解释和演示。
ng-repeat 的基本语法
ng-repeat 的基本语法如下：
---- --------------- -- --------- ---- --------
其中，items 是一个数组，item 是数组中的每个元素。ng-repeat 将会为数组中的每个元素生成一个 div 元素，并将 item 的值填充到 div 中。
ng-repeat 的高级用法
ng-repeat 还有一些高级用法，可以更灵活地控制数据的展示。
1. 使用 $index
$index 变量可以获取当前元素在数组中的索引值。比如，我们可以这样使用 $index：
---- --------------- -- --------- ------ -- - -- ---- --------
这样，ng-repeat 将会为数组中的每个元素生成一个 div 元素，并将元素的索引和值填充到 div 中。
2. 使用 ng-repeat-start 和 ng-repeat-end
ng-repeat-start 和 ng-repeat-end 可以让我们在循环中插入多个元素。比如，我们可以这样使用 ng-repeat-start 和 ng-repeat-end：
---- --------------------- -- --------- ---- -------- ------- ---------------- -------- ---- --------------------
这样，ng-repeat 将会为数组中的每个元素生成三个 div 元素，第一个 div 显示元素的值，第二个 div 显示元素的描述，第三个 div 用于结束循环。
3. 使用 ng-repeat 的过滤器
ng-repeat 还支持过滤器，可以让我们更精细地控制数据的展示。比如，我们可以这样使用 ng-repeat 的过滤器：
---- --------------- -- ----- - ------- ----------- ---- --------
这样，ng-repeat 将会只展示数组中包含 'apple' 的元素。
4. 使用 ng-repeat 的排序器
ng-repeat 还支持排序器，可以让我们按照指定的规则对数据进行排序。比如，我们可以这样使用 ng-repeat 的排序器：
---- --------------- -- ----- - -------- ---------- ---- --------
这样，ng-repeat 将会按照元素的 name 属性对数组进行排序。
示例代码
下面是一个完整的 ng-repeat 示例代码：
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- ----------
------- ---------------------------------------------------------------------------------
-------
----- -----------------------
---- --------------- -- -------
-- ------ -- - -- --------- -- - -- ---------- --
------
----
---- --------------------- -- -------
-- --------- --
------
-----
-- ---------------- --
------
---- --------------------
----
---- --------------- -- ----- - ------- ---------
-- --------- -- - -- ---------- --
------
----
---- --------------- -- ----- - -------- --------
-- --------- -- - -- ---------- --
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- ----- -------- ------ ---- ------------ -------- --
- ----- --------- ------ ---- ------------ -------- --
- ----- --------- ------ ---- ------------ -------- --
- ----- ------- ------ ---- ------------ -------- --
--
---
---------
-------
-------总结
ng-repeat 是 Angular.js 中非常常用的一个指令，可以帮助我们快速地展示数据。本文介绍了 ng-repeat 的基本语法和高级用法，并提供了示例代码。希望本文能够帮助大家更好地使用 ng-repeat。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d07260add4f0e0ff96c635