ng-repeat的group

最新推荐文章于 2024-06-15 21:29:55 发布

violet_day

最新推荐文章于 2024-06-15 21:29:55 发布

阅读量7.3k

点赞数

分类专栏： AngularJS 文章标签： angular ng-repeat group

本文链接：https://blog.csdn.net/violet_day/article/details/17023219

版权

AngularJS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、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)

Group ng-repeat items

violet_day

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ng-repeat的group

一、obj包含 .header { background-color:#3ab44a; color:white; font-weight:bold; } .item { padding-left:8px; }
复制链接

扫一扫

专栏目录