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

一、obj包含

  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

  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

  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>

ng-repeat的group的更多相关文章

  1. 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 ...

  2. table sorting–angularjs

    1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...

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

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...

  4. 初步认识Angulajs

     Angulajs是一个MVC前段框架,项目中使用Angulajs必须按照框架的写法编写代码,可以统一代码规范易于后期代码的维护. M Model 模型-数据,V View 视图-表现层 HTML/C ...

  5. Aspose.Cells Smart markers 基于模板导出Excel

    Aspose.Cells可以预先定义Excel模板,然后填充数据(官方文档:http://www.aspose.com/docs/display/cellsjava/Smart+Markers). 设 ...

  6. Pytorch版本yolov3源码阅读

    目录 Pytorch版本yolov3源码阅读 1. 阅读test.py 1.1 参数解读 1.2 data文件解析 1.3 cfg文件解析 1.4 根据cfg文件创建模块 1.5 YOLOLayer ...

  7. Docker实现GPA+Exporter监控告警系统

    Docker实现GPA+Exporter监控告警系统 1.搭建grafana,prometheus,blackbox_exporter环境 # docker run -d -p 9090:9090 - ...

  8. freeswitch的任务引擎实现分析

    概述 freeswitch核心框架中有一个定时任务系统,在开发过程中用来做一些延时操作和异步操作很方便. 我们在VOIP的呼叫流程中,经常会有一些对实时性要求没那么高的操作,或者会有阻塞流程的操作,我 ...

  9. [转]Using the Group Pane to Repeat Page Titles

    转自:http://www.wiseowl.co.uk/blog/s148/group-pane-advanced-mode.htm Repeating Page Headers in Reporti ...

  10. [C2P2] Andrew Ng - Machine Learning

    ##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...

随机推荐

  1. 在VNC中Xfce4中Tab键失效的解决方法

    说明 在Ubuntu Server 14.04上安装了xfce4桌面环境,但是却发现在终端中Tab键不能自动补齐(但是Ctrl + I 仍然可以用). 出现这种情况的原因是,由于Tab键的功能被窗口快 ...

  2. Android Fragment分页显示的实现

    分页显示有两种方式 一种是使用ViewPager 另一种是使用FragmentTransaction 上代码 1 FragmentTransaction实现方式 public class MainAc ...

  3. you don't have permission to view it 解决

    the file couldn't be opened because you don't have permission to view it   简单设置下面的选项即可,不要谢我啊! change ...

  4. STM32学习笔记(一) 如何新建一个STM32工程模板

    学习stm32,第一步就是选择开发工具了,GCC,MDK,IAR每一种都有自己的优劣势,这里我选择使用MDK软件实现STM32模板.当然如果想更快的接触stm32实例,领略嵌入式开发的魅力,STM也提 ...

  5. Objective－C与C++的区别

    1.两者的最大相同:都是从C演化而来的面相对象语言,两者都兼容标准C语言 2.两者的最大不同:Objective-C提供了运行期动态绑定机制,而C++是编译静态绑定,并且通过嵌入类(多重继承)和虚函数 ...

  6. Spring MVC 之输入验证（六）

    Spring MVC 验证主要还是用的是hibernate的验证.so需要添加以下的jar包: 1. hibernate-validator-5.2.2.Final.jar 2.hibernate-v ...

  7. 【图形学】我理解的伽马校正（Gamma Correction）

    http://blog.csdn.net/candycat1992/article/details/46228771/ 写在前面 我相信几乎所有做图像处理方面的人都听过伽马校正(Gamma Corre ...

  8. 能源项目xml文件标签释义--default-lazy-init

    1.spring的default-lazy-init参数 spring在启动的时候,会默认加载会默认加载整个对象实例图,从初始化ACTION配置.到 service配置到dao配置.乃至到数据库连接. ...

  9. 高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析

    1. ngx_lua nodejs php 比较 我在研究一阵子ngx_lua之后发现lua语法和js真的很像,同时ngx_lua模型也是单线程的异步的事件驱动的,工作原理和nodejs相同,代码甚至 ...

  10. CentOS安装vim

    VMware下CentOS安装成功后,默认自带vi,但vi功能没vim丰富.以下为CentOS中安装vim: 用yum产看源中的vim安装包: [xi@localhost ~]$ yum search ...