AngularJS的ng-repeat显示表格
代码下载：https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
<head>
<title> New Document </title>
<style>
.odd{
background-color:red;
width:400px;
}
.even{
background-color:#336699;
width:400px;
}
</style>
<meta charset="utf-8">
<script src="angular1.4.6.min.js"></script>
</head>
<body>
<table ng-controller="MainCtrl as ctrl">
<tr ng-repeat="(author,member) in ctrl.members" ng-class="ctrl.getBackground({{$odd}})">
<td>{{$index}}</td>
<td><span ng-bind='author'/></td>
<td><span ng-bind='member.id'/></td>
<td><span ng-bind='member.gender'/></td>
<td><span ng-bind='member.age'/></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
<!--
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self=this;
self.members={
andy:{id:11,age:20,gender:'male'},
bill:{id:12,age:21,gender:'female'},
Cindy:{id:23,age:22,gender:'male'},
douglas:{id:54,age:23,gender:'female'},
Einstein:{id:85,age:24,gender:'male'},
};
// 根据奇偶行决定背景
self.getBackground=function(odd){
if(odd==true){
return 'odd';
}else{
return 'even';
}
};
}]);
//-->
</script>
效果：
AngularJS的ng-repeat显示表格的更多相关文章
- 如何用angularjs制作一个完整的表格之五__完整的案例
由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- EL表达式结合页面JSTL使用 迭代显示表格
1.迭代显示表格 <%@ page isELIgnored="false"%><%@ taglib uri="/WEB-INF/struts-bean. ...
- AngularJS集合数据遍历显示
AngularJS集合数据遍历显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- easyui学习笔记7—在手风琴中显示表格
在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" h ...
- 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 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 可以正确显示表格线的Grid item view
Android上要显示一个表格,没有Swing那么专门的JTable可用. 搜了下,一般用GridView,有诸多不便和需要自己实现的地方: 跟ListView一样的Adapter,getView的时 ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
随机推荐
- 如何利用App打造自明星实现自盈利
1.了解各个概念 为了大家都能看懂这篇文章,先说明几个概念. App(Application):可以在移动设备上使用,满足人们咨询.购物.社交.娱乐.搜索等需求的一切应用程序. ...
- python基础补漏-09-反射
isinstance class A: passclass B(A): pass b = B()print isinatance(b,A)issubclass 判断某一个类是不是另外一个类的派生类 # ...
- 12章 应用spary制作高级网页组件
比较复杂的用户界面,tab面板 伸缩面板和折叠面板等组件. tab面板和菜单实际上分为两种 一种是切换各个tab页中的内容时并不刷新浏览器窗口,仅仅是被隐藏起来了 利用ja ...
- 【转】[重构]Primitive Obsession
http://blog.csdn.net/wxr0323/article/details/7913950 Primitive Obsession(基本类型偏执) 偏执这个词实在是有点难懂.百度百科传送 ...
- 刷题总结——pole（uva 1638 dp）
题目: 题解: 这道题很妙的一点是很好地利用了最矮的杆子除了放两侧以外对观察数是没有影响的性质·· 考虑n-1个杆子与n个杆子··我们可以把n个杆子的排列看成n-1个杆子的长度加1按原来的排列顺序·· ...
- linux jenkins安装（四）
Jenkins是基于Java开发的一种持续集成工具,用于监控秩序重复的工作,包括:软件版本发布/测试的持续集成.外部调用执行工作的监控等. 1. Jenkins 下载 Jenkins 下载网址:htt ...
- 【BZOJ3529】【SDOI2014】数表 （莫比乌斯反演+树状数组）
传送门 Description 有一张$n\times m$的数表,其第$i$行第$j$列 $(1≤i≤n,1≤j≤m)$ 的数值为能同时整除$i$和$j$的所有自然数之和.现在给定$a$,计算数表中 ...
- SPOJ QTREE3 - Query on a tree again!
You are given a tree (an acyclic undirected connected graph) with N nodes. The tree nodes are number ...
- vuejs入门备忘&&用vuecli构建应用
vuejs框架入门 mvvm图例 这张图足以说明MVVM的核心功能,在这三者里面,ViewModel无疑起着重要的桥梁作用. 一方面,通过ViewModel将Model的数据绑定到View的Dom元素 ...
- Glide加载图片问题记录
Glide加载图片相比于Picasso而言性能较好,又比Fresco轻巧,而且又支持加载gif动图,是Google 推荐.专注平滑的滚动.简单易用.可扩展的一款图片加载框架.但是使用时还是会遇到一些问 ...