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. js实现checkbox的全选和全不选功能

    html代码: <form name="form1" method="post" action="manage.php?act=sub" ...

  2. 代码中特殊的注释技术——TODO、FIXME和XXX的用处

    本文内容概要: 代码中特殊的注释技术--TODO.FIXME和XXX的用处. 前言:今天在阅读Qt  Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上, ...

  3. 第一天……

    Hello,大家好! 不对,这个开头有点不对.我不应该这么说,这个博客我是为我自己而开通的.目的很简单,好记兴不如烂笔头,把每天所学所感写下来. 我想作一个有条理的人,一个有计划的人,一个有效率的人. ...

  4. maven相关资料

    http://www.yiibai.com/maven/ Maven教程 https://www.zhihu.com/question/20104270 http://huangnx.com/tags ...

  5. WCF配置详解

    前面一篇文章<WCF 学习总结1 -- 简单实例> 一股脑儿展示了几种WCF部署方式,其中配置文件(App.config/Web.config)都是IDE自动生成,省去了我们不少功夫.现在 ...

  6. XML Attributes（XML属性）

    XML Attributes(XML属性) android:autoLink  是否自动链接网址或邮箱地址: android:autoText  自动检测错误: android:bufferType  ...

  7. linux笔记：linux常用命令-关机重启命令

    关机重启命令:shutdown(关机或者重启) 其他关机命令: 其他重启命令: 系统运行级别: 修改系统默认运行级别和查询系统运行级别: 退出登录命令:logout(退出登录)

  8. Win7下Maven的安装与配置

    简介  官网:https://maven.apache.org/ Apache Maven,是一个(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(Pro ...

  9. addEventListener，attachEvent

    addEventListener是js填加事件:用法如下: target.addEventListener(type,listener,useCapture) target: 文档节点.documen ...

  10. DOM事件流

    DOM事件标准定义了两种事件流:Capture(捕获)和Bubbing(冒泡):捕获和冒泡是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌 ...