ng-repeat 是 AngularJS 提供的一个指令,用于在页面上循环渲染数据。它可以根据指定的数据集合,生成重复的 HTML 元素。使用 ng-repeat 的步骤如下:
ng-repeat="item in items"
。其中,item 是循环中的每一项,items 是一个数组或对象,它包含了要循环的数据集合。{{item.name}}
或者 {{item["name"]}}
。下面是一个示例:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="student in students track by student.id">
{{student.name}}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.students = [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王五'}
];
});
</script>
在上面的示例中,ng-repeat 指令被应用在 <li>
元素上,它会根据 $scope.students
数组中的数据进行循环渲染。每个循环项都可以通过 {{student.name}}
来获取对应的学生姓名。
ng-repeat 指令还支持嵌套循环,可以在嵌套的 ng-repeat 中使用父级循环项的属性来过滤数据。
如果需要更详细地了解 ng-repeat 的用法和相关信息,可以参考腾讯云的 AngularJS 文档:https://cloud.tencent.com/document/product/400/19236
领取专属 10元无门槛券
手把手带您无忧上云