AngularJS 中的 ng-repeat 指令常见用法及实例

在 AngularJS 中，ng-repeat 指令是一个常见且非常重要的指令。它可以用于循环展示列表、生成表格等多种情况。这篇文章将会介绍 ng-repeat 的常见用法及实例，并给出详细的代码示例和解释，帮助读者更好地学习和使用 ng-repeat。

基本用法

ng-repeat 的最基本用法是循环展示一个数组内容。具体实现方法是，在 HTML 中指定一个包含需要循环展示的元素的容器元素，并使用 ng-repeat 指令。指令的值为一个表达式，通常会是一个数组。

下面是一个最基本的 ng-repeat 示例：

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

其中，items 是一个数组，item 是 ng-repeat 指令创建的循环变量。变量名可以根据需要自定义。在上述示例中，我们使用 {{ item }} 显示了数组中每个元素的内容。

带索引的循环

在循环输出数组的时候，我们有时候还需要获得每个元素的索引（即下标）。可以使用 $index 关键字获取当前元素的索引，如下所示：

<div ng-repeat="(idx, item) in items">
    {{ idx + 1 }} - {{ item }}
</div>

在上述示例中，我们指定了一个 (idx, item) 的参数列表，其中 idx 是索引变量名，item 是值变量名。我们使用 {{ idx + 1 }} 显示了当前元素的索引。

嵌套循环

我们也可以在 ng-repeat 指令中嵌套另一个 ng-repeat，实现多层嵌套循环。例如，对于一个二维数组，我们可以使用以下方式进行嵌套循环：

<table>
    <tr ng-repeat="row in array">
        <td ng-repeat="col in row">
            {{ col }}
        </td>
    </tr>
</table>

在上述示例中，我们使用了两个 ng-repeat，分别循环行和列。实际展示效果是，将数组中每个元素展示成一个表格。

循环过滤

我们有时需要对循环的数据进行过滤，只输出满足某些条件的元素。可以通过在循环表达式中添加 filter 过滤器实现：

<div ng-repeat="item in items | filter:filterStr">
    {{ item }}
</div>

在上述示例中，我们添加了一个 filter 过滤器，过滤条件为 filterStr 变量的值。只有满足该条件的 item 才会被输出。

循环排序

类似于循环过滤，我们也可以对循环的数据进行排序，可以通过在循环表达式中添加 orderBy 过滤器实现：

<div ng-repeat="item in items | orderBy:'name'">
    {{ item.name }}
</div>

在上述示例中，我们添加了一个 orderBy 过滤器，将循环的数据按照 name 属性进行排序。

循环去重

当循环数据中存在重复的元素时，我们可以通过 ng-repeat 指令添加 track by 去重参数，保证每个元素只被循环一次。例如：

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

在上述示例中，我们指定了一个 track by 参数，用于去重。该参数的值为一个属性，我们可以根据循环元素的某个特定属性进行去重。

总结

ng-repeat 指令是 AngularJS 中很常用的一个指令，可以帮助我们循环展示数据。本文介绍了 ng-repeat 的常见用法及实例，包括基本用法、带索引的循环、嵌套循环、循环过滤、循环排序和循环去重。希望本文可以帮助读者更好地使用 ng-repeat，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf8be19e06631ab9c08c28