ng-repeat的group
 http://blog.csdn.net/violet_day/article/details/17023219

一、obj包含

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html ng-app>  
  3. <head>  
  4.     <script src="lib/angular/angular.min.js"></script>  
  5.     <style type="text/css">  
  6.         .header {  
  7.             background-color:#3ab44a;  
  8.             color:white;  
  9.             font-weight:bold;  
  10.         }  
  11.         .item {  
  12.             padding-left:8px;  
  13.         }  
  14.     </style>  
  15.     <script>  
  16.         function TeamListCtrl($scope) {  
  17.             $scope.teams = [  
  18.                 { id: 0, name: "Red", players: [  
  19.                     { id: 1, firstName: "Joel", lastName: "Cash" },  
  20.                     { id: 2, firstName: "Christian", lastName: "Hamilton" },  
  21.                     { id: 3, firstName: "Cornelius", lastName: "Baldwin" }  
  22.                 ]},  
  23.                 { id: 1, name: "Blue", players: [  
  24.                     { id: 4, firstName: "Steve", lastName: "Lanny" },  
  25.                     { id: 5, firstName: "Willy", lastName: "Astor" },  
  26.                     { id: 6, firstName: "Darrell", lastName: "Tully" }  
  27.                 ]},  
  28.                 { id: 2, name: "Green", players: [  
  29.                     { id: 7, firstName: "Walker", lastName: "Greer" },  
  30.                     { id: 8, firstName: "Irvin", lastName: "Donny" },  
  31.                     { id: 9, firstName: "Kirk", lastName: "Manley" }  
  32.                 ]},  
  33.                 { id: 3, name: "Yellow", players: [  
  34.                     { id: 10, firstName: "Nick", lastName: "Barnabas" },  
  35.                     { id: 11, firstName: "Wallace", lastName: "Dyson" },  
  36.                     { id: 12, firstName: "Garrett", lastName: "Kelvin" }  
  37.                 ]},  
  38.                 { id: 4, name: "Orange", players: [  
  39.                     { id: 13, firstName: "Conrad", lastName: "Otto" },  
  40.                     { id: 14, firstName: "Cliff", lastName: "Leyton" },  
  41.                     { id: 15, firstName: "Scott", lastName: "Eurig" }  
  42.                 ]},  
  43.                 { id: 5, name: "Purple", players: [  
  44.                     { id: 16, firstName: "Darren", lastName: "Dre" },  
  45.                     { id: 17, firstName: "Shane", lastName: "Coluim" },  
  46.                     { id: 18, firstName: "Ben", lastName: "Taliesin" }  
  47.                 ]}  
  48.             ];  
  49.         }  
  50.     </script>  
  51. </head>  
  52. <body ng-controller="TeamListCtrl">  
  53. <div ng-repeat="team in teams" class="header">{{ team.name }}  
  54.     <div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>  
  55. </div>  
  56. <div ng-repeat-start="team in teams" class="header">{{team.name}}</div>  
  57. <div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>  
  58. <div ng-repeat-end><br/></div>  
  59. </body>  
  60. </html>  

 

二、固定数量group array

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script src="lib/angular/angular.min.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8. <div ng-init="items=['a', 'b', 'c', 'd', 'e', 'f', 'g']">  
  9.     <ul ng-repeat="item in items" ng-if="$index % 3 ==0">  
  10.         <li ng-if="$index+0<items.length">{{items[$index+0]}}</li>  
  11.         <li ng-if="$index+1<items.length">{{items[$index+1]}}</li>  
  12.         <li ng-if="$index+2<items.length">{{items[$index+2]}}</li>  
  13.     </ul>  
  14. </div>  
  15. </body>  
  16. </html>  

三、相同键的Group

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!doctype html>  
  2. <html ng-app>  
  3. <head>  
  4.     <script src="lib/angular/angular.min.js"></script>  
  5.     <script>  
  6.         function TestCtrl($scope) {  
  7.             $scope.items = [  
  8.                 { id: 0, name: "Red"},  
  9.                 { id: 1, name: "Red"},  
  10.                 { id: 2, name: "Red"},  
  11.                 { id: 3, name: "Red"},  
  12.                 { id: 4, name: "Yellow"},  
  13.                 { id: 5, name: "Orange"}  
  14.             ];  
  15.         }  
  16.     </script>  
  17. </head>  
  18. <body ng-controller="TestCtrl">  
  19. <ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">  
  20.     {{ a.name }}  
  21.     <li ng-repeat="b in items" ng-if="a.name==b.name">  
  22.         {{ b.id }}  
  23.     </li>  
  24. </ul>  
  25. </body>  
  26. </html>  
 posted on 2016-02-11 04:06  jayruan  阅读(737)  评论(0)  编辑  收藏  举报