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 ...
随机推荐
- 一个通用的分页存储过程实现-SqlServer（附上sql源码，一键执行即刻搭建运行环境）
使用前提 查询表必须有ID字段,且该字段不能重复,建议为自增主键 背景 如果使用ADO.NET进行开发,在查询分页数据的时候一般都是使用分页存储过程来实现的,本文提供一种通用的分页存储过程,只需要传入 ...
- Xampp 配置出现403无法访问
找到\xampp\apache\conf\httpd.conf配置文件 Access forbidden! You don’t have permission to access the reques ...
- python-高级编程-07-端口
TCP和UDP协议中都有端口这个概念,但是端口却不是IP协议的一部分 端口的出现主要是为了给协议栈和应用对应 .协议栈端口号将数据分配给不同的应用程序 .应用层程序用端口号去区分不同的链接 TCP 和 ...
- 【LeetCode】Binary Tree Preorder Traversal(二叉树的前序遍历)
这道题是LeetCode里的第144道题. 题目要求: 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很 ...
- [Offer收割]编程练习赛50
题目3 : 末尾有最多0的乘积 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定N个正整数A1, A2, ... AN. 小Hi希望你能从中选出M个整数,使得它们的乘 ...
- 以前刷过的数位dp
TOJ1688: Round Numbers Description The cows, as you know, have no fingers or thumbs and thus are una ...
- iOS----OC特性-特殊功能宏
1.NS_ASSUME_NONNULL_BEGIN && NS_ASSUME_NONNULL_END 在Swift中存在Option类型,也就是使用?和!声明的变量.但是OC里面没有这 ...
- Welcome-to-Swift-21协议(Protocols)
协议定义了一个方法的蓝图,属性和其他适合特定任务或功能的要求.协议实际上并不提供一个这些要求的实现,它只是描述了一个实现会是什么样子.协议可以通过一个类,结构或枚举提供这些要求的具体实现.满足要求的任 ...
- 【Luogu】P3343地震后的幻想乡（对积分概率进行DP）
题目链接 神难qwq.配合rqy的博客食用. 首先我们学到有一个概率函数$p(x)$表示某事件发生概率取值小于x的函数.这个函数有什么特点呢? 那就是$\int_{-∞}^{∞}p(x)dx=1$ 这 ...
- ubuntu服务器与本地文件传输
ubuntu SSH 连接.远程上传下载文件 博客分类: Ubuntu 安装 SSH(Secure Shell) 服务以提供远程管理服务 sudo apt-get install ssh SSH ...