如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]相关的知识，希望对你有一定的参考价值。
Issue with ng-repeat, AngularJS looping
我在使用角度js（离子1 app）中的ng-repeat创建这个循环结构时遇到了麻烦。当我使用ng-repeat时，日期会在每个循环中重复显示每个事件。但我想只为相应的事件显示一次日期，如图所示。
答案
您需要一个groupBy过滤器，您可以从angular-filter模块获取（手动编写）。只需设置一个JSON，其中包含一起列出的事件和日期。这是一个小型演示，您可以根据自己的示例进行调整：
var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
$scope.events = [{
"date": "Sept-1",
"event": "Event 1"
},
{
"date": "Sept-1",
"event": "Event 2"
},
{
"date": "Sept-2",
"event": "Event 3"
},
{
"date": "Sept-2",
"event": "Event 4"
},
{
"date": "Sept-3",
"event": "Event 5"
},
]
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="(key, value) in events | groupBy: 'date'">
- {{key}}
<div ng-repeat="val in value">
* {{val.event}}
</div>
<br>
</div>
</div>
</body>
</html>另一答案
您可以*使用两个ng-repeats，一个用于日期，另一个内部ng-repeat用于日期下列出的每个事件。例如：
<div ng-repeat="date in $ctrl.dates">
{{date}}
<div ng-repeat="event in $ctrl.events[date]">
<div>event</div>
</div>
</div>
我不知道你的数据结构是什么样的，但你可以很容易地适应它。
*由于使用groupBy的其他答案而更新。这个答案很有效。我个人不喜欢使用groupBy过滤器，而是选择两个串联工作的数据模型。
另一答案
另一种方法是创建一个函数，只有当它与上一个日期不同时才返回日期：
$scope.dateIfNew = function(index) {
var event = $scope.events[index];
if (index == 0) return event.date;
var prevEvent = $scope.events[index-1];
if (event.date != prevEvent.date) return event.date;
//else
return "";
};
这只使用一个ng-repeat。它避免了嵌套ng-repeat的额外性能开销，并避免使用第三方库。
The DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dateIfNew = function(index) {
var event = $scope.events[index];
if (index == 0) return event.date;
var prevEvent = $scope.events[index-1];
if (event.date != prevEvent.date) return event.date;
//else
return "";
};
$scope.events = [{"date": "Sept-1","event": "Event 1"},
{"date": "Sept-1","event": "Event 2"},
{"date": "Sept-2","event": "Event 3"},
{"date": "Sept-2","event": "Event 4"},
{"date": "Sept-3","event": "Event 5"},
]
});<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="item in events">
<td>
<b>{{dateIfNew($index)}}</b>
</td>
<td>{{item.event}}</td>
</tr>
</table>
</body>以上是关于如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
如何在 AngularJs 中使用 ng-repeat 过滤（键、值）？
angularJS如何计算输入元素中显示的ng-repeat数据
如何在 AngularJS 中使用 ng-repeat 迭代键和值？
如何在AngularJS中使用ng-repeat创建嵌套结构[关闭]