在前端开发中，我们常常需要使用表格来展示数据。如果需要动态添加表格的行，可以使用AngularJS提供的ng-repeat指令和嵌套循环来实现。
ng-repeat指令
ng-repeat指令是AngularJS中用于循环渲染HTML元素的指令之一。它可以遍历一个数组或对象，并为其中的每个元素生成一组HTML元素。
下面是一个使用ng-repeat指令渲染表格行的基本示例：
<table>
<tr ng-repeat="item in items">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>在上面的代码示例中，ng-repeat指令会遍历名为items的数组，并为其中的每个元素生成一个<tr>元素。在<tr>元素内部，我们可以使用双括号语法来显示当前元素的属性值。
嵌套循环
除了简单的数组遍历，ng-repeat指令还支持嵌套循环。这意味着我们可以在一个ng-repeat循环中嵌套另一个ng-repeat循环，以生成更复杂的HTML结构。
下面是一个使用嵌套循环渲染表格行的示例：
-- -------------------- ---- -------
-------
--- -------------- -- ------
------ -------- -------
----
-------
--- --------------- -- -----------
------ --------- -------
------ ---------- -------
-----
--------
-----
-----
--------在上面的代码示例中，我们使用了两个ng-repeat指令。外层循环遍历名为rows的数组，并为其中的每个元素生成一个表格行。内层循环则遍历当前行元素的items属性，并为其中的每个元素生成一个嵌套的表格行。
示例代码
下面是一个完整的使用ng-repeat和嵌套循环渲染表格行的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
------------- ---- ---- --------- --- ------ ------------
------- ------------------------------------------------------------------------------------
-------
------
---- ------------- - -
- ----- ---- --- ------ - - ----- ----- --- ------ -- -- - ----- ----- --- ------ -- - - --
- ----- ---- --- ------ - - ----- ----- --- ------ -- -- - ----- ----- --- ------ -- - - -
---
-------
--- -------------- -- ------
------ -------- -------
----
-------
--- --------------- -- -----------
------ --------- -------
------ ---------- -------
-----
--------
-----
-----
--------
------
-------
-------在上面的示例中，我们定义了一个名为rows的数组，其中包含两个元素。每个元素都有一个name属性和一个items属性，items属性又是一个包含两个元素的数组。
最终渲染出来的HTML表格如下：
Row 1 | Item 1 | $10
| Item 2 | $20
Row 2 | Item 3 | $30
| Item 4 | $40这个示例演示了如何使用ng-repeat指令和嵌套循环来动态生成复杂的HTML结构。通过理解
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26396