在 AngularJS 中，我们经常需要展示数组中的数据，这时候就可以使用 ng-repeat 指令来快速展示数据。ng-repeat 指令可以循环遍历数组中的每一个元素，并将其展示在页面上。本文将详细介绍 ng-repeat 指令的使用方法，并提供示例代码，帮助读者更好地理解。
ng-repeat 指令的基本用法
ng-repeat 指令的基本用法非常简单，只需要在 HTML 元素上添加 ng-repeat 属性，并指定要遍历的数组即可。例如，假设我们有一个数组，里面存储了几个字符串：
------------ - --------- ------ -----------
我们可以使用以下代码来展示这个数组中的每一个元素：
---- --- --------------- -- -------------------- -----
上面的代码中，ng-repeat 属性的值为 "name in names"，表示遍历 $scope.names 数组中的每一个元素，将其赋值给 name 变量，并在 li 元素中展示出来。{{name}} 是 AngularJS 中的表达式语法，用于展示变量的值。
使用 ng-repeat 指令进行嵌套循环
有时候，我们需要在一个数组中嵌套另一个数组，然后展示出所有的数据。这时候，就需要使用 ng-repeat 指令进行嵌套循环。例如，假设我们有一个包含多个城市的数组，每个城市又包含多个景点：
------------- - -
-
----- -----
------------ ------ ------ ------
--
-
----- -----
------------ ------ ------- ------
-
--我们可以使用以下代码来展示这个数组中的所有数据：
----
--- --------------- -- --------
-------------
----
--- --------------------- -- -------------------------------------
-----
-----
-----上面的代码中，我们首先使用 ng-repeat 指令遍历 $scope.cities 数组中的每一个元素，将其赋值给 city 变量，并在 li 元素中展示出来。然后，在每一个城市的 li 元素中，我们又使用 ng-repeat 指令遍历该城市的 attractions 数组中的每一个元素，将其赋值给 attraction 变量，并在嵌套的 ul 元素中展示出来。
使用 ng-repeat 指令进行条件渲染
有时候，我们需要根据某些条件来决定是否展示数据。这时候，就可以使用 ng-repeat 指令进行条件渲染。例如，假设我们有一个包含多个人员信息的数组，每个人员信息都有一个 age 属性：
-------------- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - --
我们可以使用以下代码来展示年龄大于等于 20 岁的人员信息：
----
--- ----------------- -- -------- ----------------- -- ----
--------------- ----------------
-----
-----上面的代码中，我们使用 ng-repeat 指令遍历 $scope.persons 数组中的每一个元素，将其赋值给 person 变量，并在 li 元素中展示出来。然后，在每一个 li 元素中，我们又使用 ng-if 指令进行条件渲染，只有当 person.age 大于等于 20 时才展示该元素。
总结
本文介绍了在 AngularJS 中使用 ng-repeat 指令来快速展示数组中的数据的方法。ng-repeat 指令可以循环遍历数组中的每一个元素，并将其展示在页面上。我们还介绍了如何使用 ng-repeat 指令进行嵌套循环和条件渲染。希望读者通过本文的学习，能够更好地理解 ng-repeat 指令的使用方法，并能够在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f11f5f2b3ccec22f9eb3ae