Angular JavaScript for 循环 - HTML

在AngularJS中，我们可以通过ng-repeat指令来动态地渲染HTML代码，用于展示列表数据、按需渲染模板以及迭代通过Ajax来获取的数据。

语法

ng-repeat指令的语法格式如下:

<element ng-repeat="item in items">
  {{ item.property }}
</element>

其中，ng-repeat指令循环渲染HTML元素，并且定义了item变量来存储每个元素的数据。items是一个数组，它包含了所有需要渲染的元素。

示例

下面是一个简单的ng-repeat指令的示例代码：

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="person in people">
      {{ person.name }} is {{ person.age }} years old.
    </li>
  </ul> 
</div>

在这个例子中，我们使用了ng-controller指令来定义一个控制器，以便于从控制器中获取数据。ng-repeat指令动态地渲染li标签，并且通过person变量展示每个元素的数据。

过滤器

我们可以使用过滤器来对数据进行排序、过滤、格式化等操作。下面是一个通过过滤器过滤名字的示例代码：

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="person in people | filter: 'e'">
      {{ person.name }} is {{ person.age }} years old.
    </li>
  </ul> 
</div>

在这个例子中，我们使用了filter过滤器，它可以对数据进行按照指定条件进行过滤。这里的条件是字母e，它将会只显示带有字母e的名字。

嵌套循环

我们也可以通过嵌套循环来渲染更加复杂的HTML代码。下面是一个嵌套循环的示例代码：

<div ng-controller="MyController">
  <table>
    <tr ng-repeat="department in departments">
      <th>{{ department.name }}</th>
      <td>
        <ul>
          <li ng-repeat="employee in department.employees">
            {{ employee.name }} ({{ employee.jobTitle }})
          </li>
        </ul>
      </td>
    </tr>
  </table> 
</div>

在这个例子中，我们使用了一个外部循环来迭代每个部门。在部门上，我们使用了th标签来展示部门的名称。内部循环则用于渲染每个部门的员工列表。

总结

通过ng-repeat指令，我们可以轻松地展示动态的HTML代码，为网页带来更丰富的交互。此外，我们还可以使用过滤器、嵌套循环等高级特性来对数据进行处理。