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. Blade - 腾讯开源的构建系统 c/c++编译环境

    ,Blade是软件project的利器.有助于模块化,模块化的力度控制自如.对于提高系统的可维护性.复杂性的隔离.代码复用的最大化.都有非常大的优点. 2,Blade提供了单元測试的最佳使用方式. 假 ...

  2. pl/sql sql窗口允许输出和允许变量替换

    pl/sql sql窗口允许输出和允许变量替换 允许输出:类似在命令窗口中输入的 setserveroutput on; 允许变量替换:如果点击了这个,类似于执行 set define off命令 在 ...

  3. CF 372B Counting Rectangles is Fun [dp+数据维护]

    题意,给出一个n行m列的矩阵 里面元素是0或者1 给出q个询问 a,b,c,d 求(a,b)到(c,d)有多少个由0组成的矩形 我们定义 watermark/2/text/aHR0cDovL2Jsb2 ...

  4. centos下yum安装lamp和lnmp轻松搞定

    centos下yum安装lamp和lnmp轻松搞定.究竟多轻松你看就知道了.妈妈再也不操心不会装lamp了. 非常辛苦整理的安装方法,会持续更新下去.凡无法安装的在评论里贴出问题来,会尽快解决.共同维 ...

  5. SQLiteHelp

    using System; using System.Collections.Generic; using System.Text; using System.Data.SQLite; using S ...

  6. Centos7 minimal 系列之Redis集群搭建(六)

    一.redis安装 借鉴上篇博客:http://www.cnblogs.com/WJ--NET/p/8176071.html 二.集群搭建 2.1.创建文件夹 mkdir redis_cluster ...

  7. Dragon Balls[HDU3635]

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...

  8. ListView的Item动画

    1.效果图 2.需求就是点击item歌曲时,实现一种飞入到预约按钮处的效果 3.思路:在布局文件中加入了一个条目布局,和listView的item一样,点击listView的item时,使用给条目布局 ...

  9. ​libz.so.1: cannot open shared object file: No such file or directory

    在虚拟机安装xtrabackup工具时候出现的报错:​​libz.so.1: cannot open shared object file: No such file or directory [ro ...

  10. 「JavaSE 重新出发」05.03.02 在运行时使用反射分析对象

    在编写程序时,如果知道想要查看的域名和类型,查看指定的域是一个很容易的事,而利用反射机制可以查看在编译时还不清楚的对象域. java Employee tank = new Employee(&quo ...