<!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 表格的更多相关文章

  1. AngularJS中自定义有关一个表格的Directive

    本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table>    <thead>        <tr>  ...

  2. 如何用angularjs制作一个完整的表格之五__完整的案例

    由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论 首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQu ...

  3. 如何用angularjs制作一个完整的表格之一__创建简单表格

    初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...

  4. 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素

    有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...

  5. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  6. 基于angularJs+ui-router+bootstrap风格的表格生成指令

    1 /** 根据参数定制表格 * api接口: * form-model:[item1,item2,item3] * form-properties:[ * {key:'',label:'',thCl ...

  7. AngularJS 使用 uppercase 过滤器的表格

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 如何用angularjs制作一个完整的表格之三__在ng-repeat中使用ng-model

    在ng-repeat中使用ng-model时会有许多问,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还 ...

  9. 使用AngularJS 添加行修改、删除表格数据

    https://blog.csdn.net/xin_x1n/article/details/53070144 <html xmlns="http://www.w3.org/1999/x ...

随机推荐

  1. 关于IQueryable和IEnumerable

    园里对这两个已经有很多文章作了深入的介绍,我总结些,当成笔记用. 一.具体判断用哪个上,如果是运行在本地内存中的,用IEnumerable,枚举该对象时,会立即反应查询结果. 如果是远程数据源,比如数 ...

  2. 通过response向服务器用Io流写入图片

       1.响应头设置字节.     使用response获得字节输出流        ServletOutputStream out = response.getOutputStream();     ...

  3. Android-事件处理机制（待补充）

    http://www.cnblogs.com/plokmju/archive/2013/03/13/2955175.html Android有两条事件处理机制 基于监听的事件处理 基于回调的事件处理 ...

  4. Datatable paging,Repeater with Paging

    /// <summary> /// 塗聚文 /// 20140225 /// </summary> public partial class DatatablePage : S ...

  5. Jupyter Notebook(iPython)

    一.Jupyter Notebook介绍 1.什么是Jupyter Notebook Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过编码开发.文档编写.运行代码和 ...

  6. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...

  7. Win8 Pro 64 Install .net3.5 在线升级会遇到错误0x800F0906。

    很多人安装Win8后都遇到了无法升级.NET Framework 3.5.1的问题,在线升级会遇到错误0x800F0906. Uninstall Windows update kB: KB296682 ...

  8. 网络威胁防护，Azure 靠的是它？

    在当今数字化转型的浪潮中,越来越多的企业希望转型于云.使用云能帮助企业提高工作效率.降低 IT 成本.增强竞争优势,有效推动企业的业务发展.但是,在向云迁移的过程中,基于云的数据中心更有可能被攻击,所 ...

  9. Flume的load-balance、failover

    配置flume集群参考https://www.cnblogs.com/jifengblog/p/9277793.html load-balance负载均衡 介绍 负载均衡是用于解决一台机器(一个进程) ...

  10. Third week-homework(员工管理系统)

    需求: 可以查询员工所有信息 可以修改员工信息 可以增加新员工 code: import sys,json # yuangong = { # "1": ["faker&q ...