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. spring是怎样管理mybatis的及注入mybatis mapper bean的

    1.spring启动mybatis的两个重要类:SqlSessionFactoryBean和MapperFactoryBean,这两个类都是org.mybatis.spring jar包的. 是用来启 ...

  2. Hibernate单向关联N-N

    单向N-N关联必须使用连接表. Company实体: package com.ydoing.hibernate5; import java.util.HashSet; import java.util ...

  3. 怎样在Java中运行Hive命令或HiveQL

    这里所说的在Java中运行Hive命令或HiveQL并非指Hive Client通过JDBC的方式连接HiveServer(or HiveServer2)运行查询,而是简单的在部署了HiveServe ...

  4. 浏览器启动不起来java.lang.NoClassDefFoundError: com/google/common/base/Function

    java.lang.NoClassDefFoundError: com/google/common/base/Function 原因:只有以下两个包 解决方案:导入 selenium-server-s ...

  5. DOMContentLoaded事件<zz>

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

  6. 百度开源其NLP主题模型工具包,文本分类等场景可直接使用L——LDA进行主题选择本质就是降维,然后用于推荐或者分类

    2017年7月4日,百度开源了一款主题模型项目,名曰:Familia. InfoQ记者第一时间联系到百度Familia项目负责人姜迪并对他进行采访,在本文中,他将为我们解析Familia项目的技术细节 ...

  7. 双系统下Ubuntu时间不准问题

    运行命令: sudo apt-get install ntpdate sudo ntpdate time.windows.com sudo hwclock --localtime --systohc ...

  8. 将查询到的数据导出到Excel终结版

    吐槽 最近新项目需要用到导出数据到Excel,试了试之前写的一篇博文,但是感觉那个不太好,主要原因是没能实现样式控制,今天我们就来介绍一种新的导出Excel方法,而且这种方法很轻量级,它利用xml生成 ...

  9. jmeter的认识——线程组的认识

    名称:可以给线程组设置一个个性化的命名 注释:可以对线程组添加备注以标记 在取样器错误后要执行的动作:就是在错误之后要如何执行,可选继续执行后续的.停止执行等. 线程数:就是需要设置多少线程执行测试. ...

  10. <Android Framework 之路>Android5.1 Camera Framework(三)

    上一次讲解了一下startPreview过程,主要是为了画出一条大致的从上到下的线条,今天我们看一下Camera在Framework的sendCommand和dataCallback,这部分属于衔接过 ...