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. ie版本

    <!--[if lte IE 6]> 自定义代码 <![endif]-->

  2. 工具-VS CODE快捷键

    快捷键 Ctrl+P 通过文件名或者标签名导航 Ctrl+Tab  在前一个文件和当前文件间切换 F1       打开全局命令 Ctrl+Shift+O will let you navigate ...

  3. 一个三年Android开发的总结-开篇

    一个三年Android开发的总结-开篇 转眼间全职从事Android开发已有三年,想把这一阶段的积累总结记录并展现出来,作为Android开发必备的知识,希望对有一定Android开发基础的人进阶有裨 ...

  4. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  5. JS冒泡和闭包案例分析

    背景: 今天逛网页发现了百度知道上一个有意思的JS问题,提问者的问题事实上蛮简单的,懂点前端开发技术的应该都能实现.提问者的要求:实现子菜单的弹出,菜单共同拥有三级.每级菜单显示时有500毫秒的延迟. ...

  6. the rendering library is more recent than your version of android studio

    近期更新了自己Android Studio中的SDK到最新版本号,AS的一部分配置改动了. 然后 在打开布局文件的时候 会出现 渲染错误 Rendering problem the rendering ...

  7. TCO 2015 2D

    250分题:给一段仅仅有'0','1'构成的字符串,然后给出串上平衡点的定义:在串上找到某个点(位置是p),这个点将串分成左右两部分(能够为空),左右分别计算字符的值的和,假设左边有字符是'1',那么 ...

  8. docker初安装的血泪史

    最近docker很火,不管是朋友圈内还是公司内聊天都离不开docker,于是对docker产生了极大的好奇心,凭着一颗程序猿的好奇心开始了docker的安装血泪史. 首先我有一台从公司退役的本本x22 ...

  9. HTML5 CSS3面试题

    一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  10. python课程设计笔记(一)开发环境配置

    今天开始学python,一个月后交成果?还是希望自己不要浮躁,认真地去学,有所付出也不期望太大回报. 现在还是一脸懵逼的状态,看着教程一点点来吧= = 毕竟我是最棒的最发光的阳光彩虹小白马! 1. 去 ...