在 Angular 中，ng-repeat 是一个非常有用的指令，它可以帮助我们将数据绑定到 HTML 中，并且可以自动地创建出多个相同的元素。在本文中，我们将详细介绍 ng-repeat 的使用方法，并且提供一些实用的示例代码。
什么是 ng-repeat
ng-repeat 是 Angular 的一个指令，它用于将一个集合中的元素重复渲染到 HTML 中。例如，我们可以使用 ng-repeat 来展示一个数组中的所有元素，或者是一个对象中的所有属性。
在 ng-repeat 中，我们需要指定一个模板，它将会被重复渲染，并且每次渲染时都会使用集合中的一个元素作为上下文。我们可以在模板中使用 Angular 表达式来访问当前元素的属性，从而将数据绑定到 HTML 中。
ng-repeat 的基本用法
下面是一个基本的 ng-repeat 的使用示例：
<div ng-repeat="item in items">
{{item}}
</div>在这个示例中，我们使用 ng-repeat 指令将一个数组中的元素渲染到 HTML 中。其中，items 是一个数组，它包含了一些字符串。在 ng-repeat 中，我们使用 item in items 的语法来指定要重复渲染的元素集合，然后在模板中使用 {{item}} 来访问当前元素的值。
当 ng-repeat 渲染这个模板时，它会遍历数组中的每一个元素，并且为每一个元素创建出一个新的 div 元素。在每个 div 元素中，{{item}} 会被替换为当前元素的值。
ng-repeat 的高级用法
除了基本的用法之外，ng-repeat 还有许多高级的用法，可以帮助我们更加灵活地处理数据绑定。
在 ng-repeat 中使用索引
有时候，我们需要在 ng-repeat 中使用当前元素的索引。例如，我们可能需要根据当前元素的索引来设置样式或者其他属性。在 ng-repeat 中，我们可以使用 $index 变量来访问当前元素的索引。
下面是一个使用 $index 的示例：
<div ng-repeat="item in items">
<span ng-class="{ 'even': $index % 2 == 0, 'odd': $index % 2 == 1 }">
{{item}}
</span>
</div>在这个示例中，我们使用 ng-class 指令来根据 $index 的值来设置 span 元素的样式。如果 $index 是偶数，那么 span 元素将会有一个 even 的类名；否则，它将会有一个 odd 的类名。
在 ng-repeat 中使用过滤器
有时候，我们需要在 ng-repeat 中对数据进行过滤。例如，我们可能需要只展示数组中的一部分元素，或者是根据某个条件来过滤元素。在 ng-repeat 中，我们可以使用过滤器来实现这个功能。
下面是一个使用过滤器的示例：
<div ng-repeat="item in items | filter: 'a'">
{{item}}
</div>在这个示例中，我们使用 filter 过滤器来过滤数组中的元素。这里的过滤条件是 'a'，它会匹配所有包含字母 a 的元素。ng-repeat 会自动地将过滤后的结果渲染到 HTML 中。
在 ng-repeat 中使用嵌套
有时候，我们需要在 ng-repeat 中嵌套另一个 ng-repeat。例如，我们可能需要展示一个二维数组，其中每个元素都是一个数组。在这种情况下，我们可以使用嵌套的 ng-repeat 来实现。
下面是一个使用嵌套 ng-repeat 的示例：
<div ng-repeat="row in matrix">
<div ng-repeat="cell in row">
{{cell}}
</div>
</div>在这个示例中，我们使用两个 ng-repeat 指令来展示一个二维数组。外层的 ng-repeat 用于遍历每一行，内层的 ng-repeat 用于遍历每个单元格。在模板中，我们使用 {{cell}} 来访问当前单元格的值。
总结
在本文中，我们介绍了 Angular 中 ng-repeat 指令的使用方法，包括基本用法和高级用法。通过使用 ng-repeat，我们可以轻松地将数据绑定到 HTML 中，并且可以实现各种复杂的数据展示需求。
希望本文能够对你有所帮助，如果你有任何疑问或者建议，欢迎在评论区留言。下面是一个完整的 ng-repeat 示例代码，供参考：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ng-repeat 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in items | filter: 'a'">
<span ng-class="{ 'even': $index % 2 == 0, 'odd': $index % 2 == 1 }">
{{item}}
</span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
});
</script>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655f12b6d2f5e1655d939ea5