AngularJS ng-repeat

在 AngularJS 中，ng-repeat 是一个非常强大且常用的指令，用于循环遍历数组或对象，并生成对应的 HTML 元素。在前端开发中，我们经常需要展示列表数据，ng-repeat 可以帮助我们快速、方便地实现这个功能。

基本语法

ng-repeat 指令的基本语法如下：

<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

在上面的例子中，ng-repeat 指令会遍历 items 数组，并为每个元素生成一个 li 标签，显示对应的 item 内容。item 是一个临时变量，用来表示当前循环的元素。

过滤器

除了基本的循环遍历，ng-repeat 还支持使用过滤器对数据进行过滤和排序。例如，我们可以按照特定条件过滤出符合要求的元素：

<ul>
  <li ng-repeat="item in items | filter: {name: 'John'}">{{ item }}</li>
</ul>

上面的例子中，只会显示 name 属性为 'John' 的元素。

嵌套循环

ng-repeat 还支持嵌套循环，可以在一个 ng-repeat 指令内部再嵌套一个 ng-repeat 指令，实现多层循环遍历。例如：

<ul>
  <li ng-repeat="group in groups">
    {{ group.name }}
    <ul>
      <li ng-repeat="item in group.items">{{ item }}</li>
    </ul>
  </li>
</ul>

在上面的例子中，groups 是一个数组，每个元素包含一个 name 和一个 items 数组，我们首先遍历 groups 数组，然后在每个 group 中再遍历对应的 items 数组。

track by

在 ng-repeat 指令中，可以使用 track by 关键字指定一个唯一标识符，用来提高性能并避免重复渲染。例如：

<ul>
  <li ng-repeat="item in items track by item.id">{{ item }}</li>
</ul>

在上面的例子中，我们使用 item.id 作为唯一标识符，确保在数据发生变化时能够正确更新 DOM，而不是重新渲染整个列表。

总结

通过 ng-repeat 指令，我们可以轻松实现列表数据的展示和循环遍历，同时支持过滤、排序和嵌套循环等功能，极大地提高了前端开发的效率和灵活性。希望本文对你有所帮助，欢迎继续探索 AngularJS 的更多强大功能！