ng-repeat的group
一、obj包含
- <!doctype html>
- <html ng-app>
- <head>
- <script src="lib/angular/angular.min.js"></script>
- <style type="text/css">
- .header {
- background-color:#3ab44a;
- color:white;
- font-weight:bold;
- }
- .item {
- padding-left:8px;
- }
- </style>
- <script>
- function TeamListCtrl($scope) {
- $scope.teams = [
- { id: 0, name: "Red", players: [
- { id: 1, firstName: "Joel", lastName: "Cash" },
- { id: 2, firstName: "Christian", lastName: "Hamilton" },
- { id: 3, firstName: "Cornelius", lastName: "Baldwin" }
- ]},
- { id: 1, name: "Blue", players: [
- { id: 4, firstName: "Steve", lastName: "Lanny" },
- { id: 5, firstName: "Willy", lastName: "Astor" },
- { id: 6, firstName: "Darrell", lastName: "Tully" }
- ]},
- { id: 2, name: "Green", players: [
- { id: 7, firstName: "Walker", lastName: "Greer" },
- { id: 8, firstName: "Irvin", lastName: "Donny" },
- { id: 9, firstName: "Kirk", lastName: "Manley" }
- ]},
- { id: 3, name: "Yellow", players: [
- { id: 10, firstName: "Nick", lastName: "Barnabas" },
- { id: 11, firstName: "Wallace", lastName: "Dyson" },
- { id: 12, firstName: "Garrett", lastName: "Kelvin" }
- ]},
- { id: 4, name: "Orange", players: [
- { id: 13, firstName: "Conrad", lastName: "Otto" },
- { id: 14, firstName: "Cliff", lastName: "Leyton" },
- { id: 15, firstName: "Scott", lastName: "Eurig" }
- ]},
- { id: 5, name: "Purple", players: [
- { id: 16, firstName: "Darren", lastName: "Dre" },
- { id: 17, firstName: "Shane", lastName: "Coluim" },
- { id: 18, firstName: "Ben", lastName: "Taliesin" }
- ]}
- ];
- }
- </script>
- </head>
- <body ng-controller="TeamListCtrl">
- <div ng-repeat="team in teams" class="header">{{ team.name }}
- <div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>
- </div>
- <div ng-repeat-start="team in teams" class="header">{{team.name}}</div>
- <div ng-repeat="player in team.players">{{player.firstName}} {{player.lastName}}</div>
- <div ng-repeat-end><br/></div>
- </body>
- </html>
二、固定数量group array
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script src="lib/angular/angular.min.js"></script>
- </head>
- <body ng-app>
- <div ng-init="items=['a', 'b', 'c', 'd', 'e', 'f', 'g']">
- <ul ng-repeat="item in items" ng-if="$index % 3 ==0">
- <li ng-if="$index+0<items.length">{{items[$index+0]}}</li>
- <li ng-if="$index+1<items.length">{{items[$index+1]}}</li>
- <li ng-if="$index+2<items.length">{{items[$index+2]}}</li>
- </ul>
- </div>
- </body>
- </html>
三、相同键的Group
- <!doctype html>
- <html ng-app>
- <head>
- <script src="lib/angular/angular.min.js"></script>
- <script>
- function TestCtrl($scope) {
- $scope.items = [
- { id: 0, name: "Red"},
- { id: 1, name: "Red"},
- { id: 2, name: "Red"},
- { id: 3, name: "Red"},
- { id: 4, name: "Yellow"},
- { id: 5, name: "Orange"}
- ];
- }
- </script>
- </head>
- <body ng-controller="TestCtrl">
- <ul ng-repeat="a in items" ng-if="a.name!=items[$index-1].name">
- {{ a.name }}
- <li ng-repeat="b in items" ng-if="a.name==b.name">
- {{ b.id }}
- </li>
- </ul>
- </body>
- </html>
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 ...
- table sorting–angularjs
1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...
- [译]用AngularJS构建大型ASP.NET单页应用(三)
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...
- 初步认识Angulajs
Angulajs是一个MVC前段框架,项目中使用Angulajs必须按照框架的写法编写代码,可以统一代码规范易于后期代码的维护. M Model 模型-数据,V View 视图-表现层 HTML/C ...
- Aspose.Cells Smart markers 基于模板导出Excel
Aspose.Cells可以预先定义Excel模板,然后填充数据(官方文档:http://www.aspose.com/docs/display/cellsjava/Smart+Markers). 设 ...
- Pytorch版本yolov3源码阅读
目录 Pytorch版本yolov3源码阅读 1. 阅读test.py 1.1 参数解读 1.2 data文件解析 1.3 cfg文件解析 1.4 根据cfg文件创建模块 1.5 YOLOLayer ...
- Docker实现GPA+Exporter监控告警系统
Docker实现GPA+Exporter监控告警系统 1.搭建grafana,prometheus,blackbox_exporter环境 # docker run -d -p 9090:9090 - ...
- freeswitch的任务引擎实现分析
概述 freeswitch核心框架中有一个定时任务系统,在开发过程中用来做一些延时操作和异步操作很方便. 我们在VOIP的呼叫流程中,经常会有一些对实时性要求没那么高的操作,或者会有阻塞流程的操作,我 ...
- [转]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 ...
- [C2P2] Andrew Ng - Machine Learning
##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...
随机推荐
- js-------》(小效果)实现倒计时及时间对象
js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...
- Git的优势
分布式,强调个体 公共服务器压力和数据量都不会太大 速度快.灵活 任意两个开发者之间可以很容易的解决冲突 离线工作
- 使用fragment兼容低版本的写法
[1]定义fragment继承V4包中的Fragment [2]定义的activity要继承v4包中的FragmentActivity [3]通过这个方法getSupportFragme ...
- MyBatis——优化MyBatis配置文件中的配置
原文:http://www.cnblogs.com/xdp-gacl/p/4264301.html 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写 ...
- spring的初始化bean,销毁bean之前的操作详解
我所知道的在spring初始化bean,销毁bean之前的操作有三种方式: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二种是 ...
- Eclipse上安装springsource-tool-suite(zhuan)
http://jingyan.baidu.com/article/1612d5005fd087e20f1eee10.html *********************************** s ...
- mysql报关于用户密码1045(28000),几种处理方法 (zhuan)
http://blog.itpub.net/29371470/viewspace-1409075/ http://blog.csdn.net/rosten/article/details/250658 ...
- python剑指网络篇一
#coding:utf-8 __author__ = 'similarface' #!/usr/bin/env python import socket #二进制和ASCII互转及其它进制转换 fro ...
- phalcon: 过滤(Phalcon\Filter())
过滤,就是清除不需要的数据,留下想要的数据. 其调用方法如下,一: $filter = new \Phalcon\Filter(); $filter->sanitize("some(o ...
- ios开发者证书 签发者无效
2月14日以后,由于苹果更新安全证书:会导致本机制作的所有开发者证书无效: 钥匙串里的开发者证书无法使用 解决方式: 重新下载苹果公司的安全证书,并安装 1: 先在钥匙串里搜索到老的证书,如果有,请先 ...