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. rabbitMQ学习笔记(七) RPC 远程过程调用

    关于RPC的介绍请参考百度百科里的关于RPC的介绍:http://baike.baidu.com/view/32726.htm#sub32726 现在来看看Rabbitmq中RPC吧!RPC的工作示意 ...

  2. 在IntelliJ IDEA中创建Maven多模块项目

    在IntelliJ IDEA中创建Maven多模块项目 1,创建多模块项目选择File>New>Project 出现New Project窗口左侧导航选择Maven,勾选右侧的Create ...

  3. 【算法拾遗(java描写叙述)】--- 选择排序(直接选择排序、堆排序)

    选择排序的基本思想 每一趟从待排序的记录中选出关键字最小的记录,顺序放在已排好序的子文件的最后,知道所有记录排序完毕.主要有两种选择排序方法:直接选择排序(或称简单选择排序)和堆排序. 直接选择排序 ...

  4. jboss final 7.1.1相关error以及解决方式

    问题1 报错提示: MSC00001: Failed to start service jboss.web.deployment.default-host./: Caused by: java.lan ...

  5. 腾讯云 ubuntuservermysql安装和外网訪问

    1 腾讯云 购买ubuntu 默认账户是ubuntu(因为winscp 使用ubuntu没有权限写文件) 因为腾讯云主机ubuntu系统默认username为ubuntu,不喜欢每次做什么都要sudo ...

  6. php+mysql 最简单的留言板

    学完了记得动手操作. 測试地址(未过滤) <html> <body> <head><meta http-equiv="Content-Type&qu ...

  7. 0x35 高斯消元与线性空间

    颓了十天回来做题果然…… 感觉还是很有收获的,这两以前都没学过 bzoj1013: [JSOI2008]球形空间产生器sphere poj1830(upd) 之前做得很烂还被 D飞*2 了..重做一次 ...

  8. electron-vue中使用iview 报错this. is readonly的解决办法

    title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...

  9. Elasticsearch部署异常Permission denied

    异常描述 在Linux上部署ElasticSearch时抛出了一个异常如下: log4j:ERROR setFile(null,true) call failed. java.io.FileNotFo ...

  10. ROS常用知识指南

    前言:介绍一些基础常用的知识. 一.标准单位 二.坐标表现方式 三.默认安装位置 通过apt-get安装的软件包, 默认安装位置为:/opt/ros/kinetic/share 四.软件包安装流程 4 ...