随着 Web 应用的发展，单页应用（SPA）的需求越来越高。而在 SPA 中，列表展示是一个非常常见的需求。AngularJS 中的 ng-repeat 指令可以方便地实现这一需求。本文将详细介绍如何利用 AngularJS 中的 ng-repeat 实现 SPA 应用的列表展示。
什么是 ng-repeat？
ng-repeat 是 AngularJS 中的一个指令，用于在模板中循环遍历集合并生成重复的 HTML 元素。它可以用于展示集合中的数据，例如列表、表格等。
ng-repeat 的基本语法如下：
<div ng-repeat="item in items">
{{ item }}
</div>其中，items 是一个集合，item 是集合中的每个元素。ng-repeat 会根据 items 中的元素数量生成对应数量的 div 元素，并在每个 div 元素中显示 item 的值。
利用 ng-repeat 实现列表展示
在 SPA 应用中，通常需要从后端获取数据并展示在页面上。我们可以利用 ng-repeat 实现列表展示。下面是一个简单的示例：
<div ng-controller="MyController">
<ul>
<li ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>在这个示例中，我们定义了一个控制器 MyController，并在控制器中定义了一个 users 数组。在模板中，利用 ng-repeat 遍历 users 数组，并生成对应数量的 li 元素。每个 li 元素中显示 user 的 name 属性。
利用 ng-repeat 实现分页
在实际应用中，通常需要实现分页功能。我们可以利用 AngularJS 的过滤器和 ng-repeat 实现分页。下面是一个示例：
<div ng-controller="MyController">
<ul>
<li ng-repeat="user in users | limitTo:pageSize:(currentPage-1)*pageSize">
{{ user.name }}
</li>
</ul>
<pagination total-items="totalItems" ng-model="currentPage" items-per-page="pageSize"></pagination>
</div>在这个示例中，我们定义了一个控制器 MyController，并在控制器中定义了一个 users 数组。在模板中，我们利用 limitTo 过滤器和 ng-repeat 实现分页。limitTo 过滤器用于限制 ng-repeat 循环的次数，从而实现分页效果。currentPage 和 pageSize 是分页的参数，我们可以在控制器中定义它们，并在模板中使用。最后，我们利用 AngularUI 的 pagination 组件实现分页导航。
总结
利用 AngularJS 中的 ng-repeat 可以方便地实现 SPA 应用的列表展示。我们可以利用 ng-repeat 实现简单的列表展示，也可以结合过滤器和分页组件实现更复杂的功能。希望本文对大家学习 AngularJS 有所帮助。完整示例代码如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>利用 AngularJS 中的 ng-repeat 实现 SPA 应用的列表展示</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="MyController">
<h1>用户列表</h1>
<ul>
<li ng-repeat="user in users | limitTo:pageSize:(currentPage-1)*pageSize">
{{ user.name }}
</li>
</ul>
<pagination total-items="totalItems" ng-model="currentPage" items-per-page="pageSize"></pagination>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('MyController', function($scope) {
$scope.users = [
{ name: '张三' },
{ name: '李四' },
{ name: '王五' },
{ name: '赵六' },
{ name: '孙七' },
{ name: '周八' },
{ name: '吴九' },
{ name: '郑十' }
];
$scope.currentPage = 1;
$scope.pageSize = 3;
$scope.totalItems = $scope.users.length;
});
</script>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567aa16d2f5e1655d073ee2