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 ...
随机推荐
- 大数据学习——scala集合练习
package com /** * Created by ZX on 2016/4/5. */ object ListTest { def main(args: Array[String]) { // ...
- 聊聊、Spring 第二篇
之前写了一篇<Spring环境搭建一>,感觉写的很烂,也许是时间有限,写的很急.今天我想再写写 Spring 的环境搭建,因为 Spring 的模块是可以单独拿出来用的,所以有很多的模块不 ...
- TensorFlow——小练习：feed
feed就是喂入数据 使用feed前必须要有占位符作为操作的对象,在运行操作的时候喂入数据. # _*_coding:utf-8_*_ import tensorflow as tf import n ...
- 移动端可拖动导航菜单小demo
<!DOCTYPE html> <html lang="en"> <head> <title>移动端滑动导航菜单</title ...
- HUST——1106xor的难题之二（异或树状数组单点修改和区间查询）
1106: xor的难题之二 时间限制: 2 Sec 内存限制: 128 MB 提交: 8 解决: 3 题目描述 上次Alex学长的问题xor难题很简单吧,现在hkhv学长有个问题想问你们. 他现 ...
- [CODEVS1912] 汽车加油行驶问题（分层图最短路）
传送门 吐槽:神tm网络流 dis[i][j][k] 表示到 (i, j) 还有 k 油的最优解 然后跑spfa,中间分一大堆情况讨论 1.当前队头还有油 1.目标点有加油站——直接过去 2.目标点每 ...
- [luoguP3302] [SDOI2013]森林（主席树 + 启发式合并 + lca）
传送门 显然树上第k大直接主席树 如果连边的话,我们重构小的那一棵,连到另一棵上. 说起来简单,调了我一晚上. 总的来说3个错误: 1.离散化写错位置写到了后面 2."="写成了& ...
- springboot中如果使用了@Autowired注入了bean，则这个类也要为spring bean，new出来注入的bean为null
https://blog.csdn.net/Mr_Runner/article/details/83684088 问题:new出来的实例中含有@Autowired注入时,注入的Bean为null: 解 ...
- wireshark 找不到网卡的解决办法
1. 以管理员身份打开CMD命令行 输入命令:net start npf C:\WINDOWS\system32>net start npf NetGroup Packet Filter Dri ...
- vim的复制粘贴(包括系统剪贴板)
1.vim常用复制粘贴命令 Vim的复制粘贴命令无疑是y (yank),p(paster),加上yy,P PS: vim有个很有意思的约定(我觉得是一种约定),就是某个命令的大小写都是实现某种功能,只 ...