在前端开发中，我们经常需要对数据进行分组展示，这个需求在 Angular 中可以通过 ng-repeat 指令来实现。ng-repeat 是 AngularJS 中最常用的指令之一，它可以重复渲染 HTML 元素，常常用于列表的展示。
但是在某些情况下，我们需要对列表进行分组展示，这时候 ng-repeat 的默认行为就显得不够用了。本文将介绍如何使用 ng-repeat 实现分组展示数据的方法，并附带代码示例和详细指导。
首先，分析分组展示数据的需求
在实际开发中，我们可能需要对数据进行分组展示，每个分组内的数据都有一定的关联性。例如，我们需要展示一个商品列表，每个商品还有所属的分类信息。这时候我们就需要把商品按照分类分组，把同一分类的商品放在一起展示。
实现分组展示数据的方法
实现分组展示数据的方法有很多种，这里我们介绍一种常用的方法——使用 ng-repeat 嵌套。
具体步骤如下：
获取需要展示的数据，并按照分组要求进行排序或分组，返回一个包含分组信息的数组。
在 HTML 中使用 ng-repeat 对外层分组进行遍历，内层 ng-repeat 对每个分组内的数据进行遍历，实现嵌套展示。
示例代码如下：
<div ng-repeat="(group, items) in itemsByGroup">
<h2>{{ group }}</h2>
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>
</div>通过上述代码可以看出，我们先通过 ng-repeat 遍历包含分组信息的数组 itemsByGroup，然后在每个外层的 div 元素中展示分组名称 group，并在内层的 ul 元素中展示该分组下的所有商品项。
完整代码示例
下面是一个完整的代码示例，可以直接在 Angular 中运行，供大家参考学习：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular 分组展示数据示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="(group, items) in itemsByGroup">
<h2>{{ group }}</h2>
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>
</div>
</body>
<script>
angular.module("app", [])
.controller("mainCtrl", function($scope) {
$scope.items = [{
name: "商品1",
group: "类别1"
},
{
name: "商品2",
group: "类别1"
},
{
name: "商品3",
group: "类别2"
},
{
name: "商品4",
group: "类别2"
}
];
$scope.itemsByGroup = {};
$scope.items.forEach(function(item) {
var groupName = item.group;
if (!$scope.itemsByGroup[groupName]) {
$scope.itemsByGroup[groupName] = [];
}
$scope.itemsByGroup[groupName].push(item);
});
});
</script>
</html>总结
本文介绍了如何使用 ng-repeat 实现分组展示数据的方法，这是一种常用的方法，在实际开发中可以按照自己的需求进行定制。希望通过本文的介绍，大家能够更加熟练地应用 Angular 框架，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f46467d4982a6eb05c36b