AngularJS 使用 even 和 odd 表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<style>
table td {
border:solid 1px grey;
border-collapse:collapse;
padding:10px;
}
</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<table>
<tr data-ng-repeat="x in names">
<!--<td data-ng-if="$odd" style="background-color:#f1f1f1">{{$index+1}}</td>
<td data-ng-if="$even" style="background-color:#ffffff">{{$index+1}}</td>
<td data-ng-if="$odd" style="background-color:#f1f1f1">{{x.liaohao|uppercase}}</td>
<td data-ng-if="$even" style="background-color:#ffffff">{{x.liaohao|uppercase}}</td>
<td data-ng-if="$odd" style="background-color:#f1f1f1">{{x.xinghao}}</td>
<td data-ng-if="$even" style="background-color:#ffffff">{{x.xinghao}}</td>-->
<td data-ng-if="$odd"style="background-color:#f1f1f1">{{$index+1}}</td><td data-ng-if="$odd" style="background-color:#f1f1f1">{{x.liaohao|uppercase}}</td><td data-ng-if="$odd" style="background-color:#f1f1f1">{{x.xinghao}}</td>
<td data-ng-if="$even" style="background-color:#ffffff">{{$index+1}}</td><td data-ng-if="$even" style="background-color:#ffffff">{{x.liaohao|uppercase}}</td><td data-ng-if="$even" style="background-color:#ffffff">{{x.xinghao}}</td>
</tr>
</table>
</div>
</div>
<script src="jQuery/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope, $http) { $http.get("json/json.json").success(function (response) { $scope.names=response.records}) })
</script>
</body>
</html>
AngularJS 使用 even 和 odd 表格的更多相关文章
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- 如何用angularjs制作一个完整的表格之五__完整的案例
由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...
- 如何用angularjs制作一个完整的表格之一__创建简单表格
初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- 基于angularJs+ui-router+bootstrap风格的表格生成指令
1 /** 根据参数定制表格 * api接口: * form-model:[item1,item2,item3] * form-properties:[ * {key:'',label:'',thCl ...
- AngularJS 使用 uppercase 过滤器的表格
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model
在ng-repeat中使用ng-model时会有许多问,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还 ...
- 使用AngularJS 添加行修改、删除表格数据
https://blog.csdn.net/xin_x1n/article/details/53070144 <html xmlns="http://www.w3.org/1999/x ...
随机推荐
- C# 批量生成随机密码，必须包含数字和字母，并用加密算法加密
要求:密码必须包含数字和字母 思路:1.列出数字和字符. 组成字符串 :chars 2.利用randrom.Next(int i)返回一个小于所指定最大值的非负随机数. 3. 随机取不小于chars长 ...
- js- 引用和复制（传值和传址）
js- 引用和复制(传值和传址) 好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么引用:对象.数组.函数复制:数字 ...
- html 跨过CSRF验证
/* CSRF配置 */function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection r ...
- 【linux相识相知】sed命令
在之前的博客中我们介绍了文本三剑客中grep,本次博客就另外一名剑客——sed做出详细的描述,sed真的是一款强大的工具.下面让我们来一起看一下吧! 概述和工作机制 SED的英文全称为Stream E ...
- 浅谈 .NET Framework 与 .NET Core 的区别与联系
2017到了,咱们学点啥啊,要想知道学点啥,先弄清.NET Framework 与 .NET Core 这两个概念 .当今 net 生态系统如下: 从上面图中我们可以看到.net 主要分为三个部分 ...
- 不同线程不能获取其他线程设置的ThreadLocal里面的值
背景: 最近在项目用到了ThreadLocal,存放一些值.起线程异步获取ThreadLocal中的值,得到null.这是由于,ThreadLocal.get()会获取当前线程的一个map对象,以Th ...
- 002Angular2工程目录解构
|--my-app 工程名 |--e2e 端到端测试 |--node_modules package.json列出的第三方模块放在此处 |--src |--app |--app.component.c ...
- em和px区别
附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...
- 【读书笔记】如何高效学习(Learn More ,Study Less)
导读: 你会不会好奇为什么学习好的人会学的越来越好?那些课下不学习的人却比你考的好?一个人是怎么同时拿到好几个学位?为啥反复背的知识要领总是忘?为啥看个书总是不停走神?为啥总是苦逼似得看书直至厌烦? ...
- Android自定义之ScrollView下拉刷新
公司项目,需要用到ScrollView的下拉刷新,一开始使用的时候PullToRefresh三方库的下拉刷新,我比较纠结第三档库,很强大,但是,公司项目的需求,PullToRefresh就不能做到了, ...