ng-repeat的group

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

一、obj包含

[html] view plain copy

  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

  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

  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>
时间： 2024-10-26 11:52:43

ng-repeat的group的相关文章

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

Top 10 JavaScript traps for a C# developer

Top 10 JavaScript traps for a C# developer 27 May 2014   | .NET · Code · Javascript Tags: .net · C# · javascript If you are an experienced C# developer, coming into JavaScript world for application development, you will end up making few common mista

table sorting&ndash;angularjs

1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script> 3:   4: <table ng:controller="SortableTableCtrl"> 5: <thead> 6: <tr> 7: <th

Node.js开发入门—引入UIBootstrap

很多Web管理系统的侧边菜单是可折叠的(手风琴样式),我们在前面两篇文章里的HTML模板,自己用div.css做了一些处理,可效果不好.所以我请来了一个前端UI框架,UI Bootstrap,来帮忙.别看它名字里带一个Bootstrap,但它并不依赖Bootstrap,而是用AngularJS实现的原生指令哦.我讨厌太多的依赖,这个我喜欢. 这篇我们以"Angular简单示例"里的AngularDemo为基础,我说到的目录什么的,都遵循express应用的默认目录结构. UI Boot

[译]用AngularJS构建大型ASP.NET单页应用（三）

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single AngularUI 下面的示例中使用了AngularUI的各种UI组件.AngularUI 是AngularJS 框架的一个辅助套件.示例中使用的主要组件大部分来在AngularUI 的一个子集UI Bootstrap.UI Bootstrap是从Twitter Bootstrap派生出来的,它使用A

JGroups setting and tuning

UDP configuration: UDP protocol stack will bundle message into large ones and send them together to reduce network overhead. Relevant configurations are: bundler_type:   old  -> DefaultBundler   use a TimerScheduler to send the message.  new ->Trans

ngForm

ngForm用于ng repeat隔离控件名 <form name="userForm" novalidate> <div class="form-group" ng-repeat="user in formData.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }"> <ng-form name="userF

24点计算器的Javascript实现

前段时间小舅子(小学生)过来玩,没事一起玩3*8=24,遇到难算的半天都想不出来,所以就想有没有app或者小工具啥的,搜了一下,有工具,但是不好用,所以就想自己写个简单易用的. 开始着手做的时候,发现运算逻辑无法总结成简单的计算公式,百度也没找到有人完整的实现,最后只能用最笨的方法了,且听我娓娓道来. 首先,按照常规,共有四个正整数参与运算,取值区间均为 [1,10](包含1和10),仅有加减乘除以及括号运算,不存在其他高级运算(如平方.开方等等),这四个数的计算顺序不确定,每个数字参与且仅参与

ES6 的字符串扩展

{ console.log('a',`\u0061`); console.log('s',`\u20BB7`); console.log('s',`\u{20BB7}`); } { let s='??'; console.log('length',s.length); console.log('0',s.charAt(0)); console.log('1',s.charAt(1)); console.log('at0',s.charCodeAt(0)); console.log('at1',s

djfhkjdahsg 将会对会计师公会斯蒂芬

http://f.dangdang.com/group/24690/7818358/ http://f.dangdang.com/group/24690/7818366/ http://f.dangdang.com/group/24690/7818410/ http://f.dangdang.com/group/24690/7818420/ http://f.dangdang.com/group/24690/7818408/ http://f.dangdang.com/group/24690/7