一、obj包含
<!doctype html>
<html ng-app>
<head>
<script src="lib/angular/angular.min.js"></script>
<style type="text/css">
.header {
background-color:#3ab44a;
color:white;
font-weight:bold;
}
.item {
padding-left:8px;
}
</style>
<script>
function TeamListCtrl($scope) {
$scope.teams = [
{ id: 0, name: "Red", players: [
{ id: 1, firstName: "Joel", lastName: "Cash" },
{ id: 2, firstName: "Christian", lastName: "Hamilton" },
{ id: 3, firstName: "Cornelius", lastName: "Baldwin" }
]},
{ id: 1, name: "Blue", players: [
{ id: 4, firstName: "Steve", lastName: "Lanny" },
{ id: 5, firstName: "Willy", lastName: "Astor" },
{ id: 6, firstName: "Darrell", lastName: "Tully" }
]},
{ id: 2, name: "Green", players: [
{ id: 7, firstName: "Walker", lastName: "Greer" },
{ id: 8, firstName: "Irvin", lastName: "Donny" },
{ id: 9, firstName: "Kirk", lastName: "Manley" }
]},
{ id: 3, name: "Yellow", players: [
{ id: 10, firstName: "Nick", lastName: "Barnabas" },
{ id: 11, firstName: "Wallace", lastName: "Dyson" },
{ id: 12, firstName: "Garrett", lastName: "Kelvin" }
]},
{ id: 4, name: "Orange", players: [
{ id: 13, firstName: "Conrad", lastName: "Otto" },
{ id: 14, firstName: "Cliff", lastName: "Leyton" },
{ id: 15, firstName: "Scott", lastName: "Eurig" }
]},
{ id: 5, name: "Purple", players: [
{ id: 16, firstName: "Darren", lastName: "Dre" },
{ id: 17, firstName: "Shane", lastName: "Coluim" },
{ id: 18, firstName: "Ben", lastName: "Taliesin" }
]}
];
}
</script>
</head>
<body ng-controller="TeamListCtrl">
<div ng-repeat="team in teams" class="header">{{ team.name }}
<div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>
</div>
<div ng-repeat-start="team in teams" class="header">{{team.name}}</div>
<div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>
<div ng-repeat-end><br/></div>
</body>
</html>
二、固定数量group array
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/angular/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="items=['a', 'b', 'c', 'd', 'e', 'f', 'g']">
<ul ng-repeat="item in items" ng-if="$index % 3 ==0">
<li ng-if="$index+0<items.length">{{items[$index+0]}}</li>
<li ng-if="$index+1<items.length">{{items[$index+1]}}</li>
<li ng-if="$index+2<items.length">{{items[$index+2]}}</li>
</ul>
</div>
</body>
</html>
三、相同键的Group
<!doctype html>
<html ng-app>
<head>
<script src="lib/angular/angular.min.js"></script>
<script>
function TestCtrl($scope) {
$scope.items = [
{ id: 0, name: "Red"},
{ id: 1, name: "Red"},
{ id: 2, name: "Red"},
{ id: 3, name: "Red"},
{ id: 4, name: "Yellow"},
{ id: 5, name: "Orange"}
];
}
</script>
</head>
<body ng-controller="TestCtrl">
<ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">
{{ a.name }}
<li ng-repeat="b in items" ng-if="a.name==b.name">
{{ b.id }}
</li>
</ul>
</body>
</html>
Displaying Groups with AngularJS ng-repeat-start and ng-repeat-end (with Example)