ng-repeat 指令可以完美的显示表格。


  1. <div ng-app="myApp" ng-controller="customersCtrl">
  2. <table>
  3. <tr ng-repeat="x in names">
  4. <td>{{ x.Name }}</td>
  5. <td>{{ x.Country }}</td>
  6. </tr>
  7. </table>
  8. </div>
  9. <script>
  10. var app = angular.module('myApp', []);
  11. app.controller('customersCtrl', function($scope, $http) {
  12. $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
  13. .success(function (response) {$scope.names = response.records;});
  14. });
  15. </script>

  1. <table>
  2. <tr ng-repeat="x in names">
  3. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
  4. <td ng-if="$even">{{ x.Name }}</td>
  5. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
  6. <td ng-if="$even">{{ x.Country }}</td>
  7. </tr>
  8. </table>

这个$odd
$even是什么意思?












angular-表格的更多相关文章

  1. angular表格分页

    <!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  2. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  3. 轻松Angularjs实现表格按指定列排序

    angular表格点击序号进行升序,再次点击进行降序排序,在输入框输入信息,出现相对应数据的那一行. html: <input type="text" ng-model=&q ...

  4. 初探angular

    前言 angular4.0目前已经发布了,angular是mvw框架,所以对其有一个简单的了解还是很有必要的. 目前angular有中文官网,且文档介绍也都是4.x的,但是为了了解其发展过程,我们先了 ...

  5. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  6. dtGrid插件集成到Angular环境实现表格化数据展现

    00没有抱怨的世界 周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333. AngularJS用的时间很短,高级的用法有点吃不消了,$diges ...

  7. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  8. Angular 2的表格控件

    Angular 2的表格控件 前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular ...

  9. Angular将填入表单的数据渲染到表格

    一.项目简介 我们将采用Angular框架来做一个demo,这个demo将要实现的功能如下: 在X坐标和Y坐标文本框输入信息,然后点击添加,就会在下面表格 中出现一项相应的数据,点击每一项旁边的删除按 ...

  10. angular实现表格的全选、单选、部分删除以及全部删除

    昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...

随机推荐

  1. log4j输出多个自定义日志文件,动态配置路径

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  2. 转载:Java编程风格与命名规范整理

    转载自:传送门 不想复制,点进去看喽23333333

  3. Windows-命令窗口-强制关机命令

    Windows +R CMD  命令行窗口shutdown -s -f -t 以上参数中的-s代表关机,-f表示强制关闭所有应用程序,-t 00代表不用等待立即执行(时间以秒计算,把时间改长就变成了定 ...

  4. spring的启动过程就是创建ioc容器的过程

    1. spring简介 spring的最基本的功能就是创建对象及管理这些对象之间的依赖关系,实现低耦合.高内聚.还提供像通用日志记录.性能统计.安全控制.异常处理等面向切面的能力,还能帮我们管理最头疼 ...

  5. [React] Reference a node using createRef() in React 16.3

    In this lesson, we look at where we came from with refs in React. Starting with the deprecated strin ...

  6. uva 10003 Cutting Sticks 【区间dp】

    题目:uva 10003 Cutting Sticks 题意:给出一根长度 l 的木棍,要截断从某些点,然后截断的花费是当前木棍的长度,求总的最小花费? 分析:典型的区间dp,事实上和石子归并是一样的 ...

  7. android帧动画,移动位置,缩放,改变透明度等动画解说

    1.苦逼的需求又来了,须要实现一些动画效果,第一个想到的是播放gif图片,可是这样会占包的资源,而且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...

  8. SOA概念具体解释

    1.概述 1.1基本定义 SOA(Service-Oriented Architecture)既面向服务的体系结构,是一个组件模型.它将应用程序猿的不同功能可是(称为服务)通过定义良好的接口联系起来. ...

  9. Unable to access the IIS metabase

    https://stackoverflow.com/questions/12859891/error-unable-to-access-the-iis-metabase 解决方法1 On Window ...

  10. 蓝桥杯-- 历届试题 核桃的数量 (gcd)

      历届试题 核桃的数量   时间限制:1.0s   内存限制:256.0MB        问题描述 小张是软件项目经理,他带领3个开发组.工期紧,今天都在加班呢.为鼓舞士气,小张打算给每个组发一袋 ...