ng-repeat的group

时间：2016-02-11 06:45:58 阅读：307 评论：0 收藏：0 [点我收藏+]

标签：

http://blog.csdn.net/violet_day/article/details/17023219

一、obj包含

[html] view plain copy

<!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

[html] view plain copy

<!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

[html] view plain copy

<!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>

ng-repeat的group

标签：

原文地址：http://www.cnblogs.com/jayruan/p/5186281.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行