在前端开发中，经常需要创建表格或者网格来展示数据。使用 AngularJS 的 ng-repeat 指令可以轻松地创建出这样的网格。
简介
AngularJS 是一个流行的 JavaScript 前端框架，它提供了许多指令和服务来简化前端开发。其中，ng-repeat 指令可以用于遍历数组、对象和集合，并将其中的元素渲染到HTML页面中。通过利用 ng-repeat 指令，我们可以轻松地创建出一个网格。
创建网格
下面是一个简单的例子，使用 ng-repeat 指令创建一个包含姓名、年龄和性别的用户列表网格。
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
--- --------------- -- -------
------ --------- -------
------ -------- -------
------ ----------- -------
-----
--------
--------在上面的代码中，ng-repeat 指令被应用到 <tr> 元素上，循环遍历 users 数组中的每个元素，并将其赋值给 user 变量。在每次循环迭代中，user 对象的属性可以通过插值表达式 {{ }} 来渲染到 HTML 页面上，如 {{ user.name }}。
指定循环索引
有时候，在创建网格时需要指定每个元素的索引号。可以使用 $index 关键字来获取当前循环迭代的索引。
下面的例子中，我们添加了一个序号列来显示每个用户在列表中的位置：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
--- ------------------ ----- -- -------
------ ----- - - -------
------ --------- -------
------ -------- -------
------ ----------- -------
-----
--------
--------在上面的代码中，我们使用 (index, user) 的形式来指定变量名和属性。这里的 index 变量保存了当前循环迭代的索引号，而 user 变量保存了数组中的元素对象。
过滤器
使用过滤器可以对 ng-repeat 指令中的数据进行处理。例如，可以使用 AngularJS 内置的 limitTo 过滤器来限制要显示的元素数量。
下面的例子中，我们只显示前两个用户的信息：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
--- --------------- -- ----- - -----------
------ --------- -------
------ -------- -------
------ ----------- -------
-----
--------
--------在上面的代码中，我们使用 limitTo:2 的形式来指定要显示的元素数量。这样，就只会显示数组中的前两个元素。
总结
使用 AngularJS 的 ng-repeat 指令可以轻松地创建出表格或网格。通过掌握 ng-repeat 的使用方法，我们可以更加高效地处理数据，并将其渲染到 HTML 页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25558