zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    【C语言天天练（二二）】位操作
    远程调用内核接口的封装类(RCKObjs)
    03010_防止SQL注入
    PHP 5 SimpleXML 函数
    PHP 5 String 函数
    PHP 5 MySQLi 函数
    PHP 杂项 函数
    PHP PDO
    PHP 5 时区
    分享海量 iOS 及 Mac 开源项目和学习资料
  • 原文地址：https://www.cnblogs.com/jayruan/p/5186281.html
Copyright © 2011-2022 走看看