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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <!--CSS样式-->

    <style>

        table, th , td {

            border: 1px solid grey;

            border-collapse: collapse;

            padding: 5px;

        }

        table tr:nth-child(odd) {

            background-color: #f1f1f1;

        }

        table tr:nth-child(even) {

            background-color: #ffffff;

        }

    </style>

    <script>

        var app = angular.module('myApp',[]);

        app.controller('customersCtrl',function($scope,$http){

            $http.get('http://www.runoob.com/try/angularjs/data/Customers_JSON.php')

                .success(function(response){

                    $scope.names = response.records;

                });

        });

    </script>

</head>

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

      <table>

          <tr ng-repeat="x in names|orderBy:'Country'">//使用过滤器orderBy按某一个字段排序

              <td>{{$index+1}}</td>//表格显示序号可以在<td>中添加$index

              <td ng-if="$even" style="background-color:#f1f1f1">{{x.Name}}</td>

              <td ng-if="$even">{{ x.Name }}</td>

              <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country|uppercase}}</td>//过滤器uppercase转换成大写

              <td ng-if="$even">{{ x.Country }}</td>  //$even $odd 奇数偶数判断

          </tr>

      </table>

  </div>

</body>

</html>

　　

AngularJS(7)-表格的更多相关文章

  1. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

  2. AngularJS：表格

    ylbtech-AngularJS:表格 1.返回顶部 1. AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: A ...

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

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

  4. Angularjs中表格的增删改查

    在一个管理系统中,不外乎都是增删改查.现在比如有个表格,我想修改当前行的数据,如下图所示 一点击修改的时候,当前页面我需要修改的数据,变成能修改的样式,点击保存能保存当前修改的数据,如下图所示 需要引 ...

  5. 如何用angularjs制作一个完整的表格之一__创建简单表格

    初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢 ...

  6. 强强联合之jquery操作angularjs对象

    jquery是一个非常强大的js框架,angularjs是一个非常牛的前端mvc框架.虽然用其中的任何一个框架在项目中够用了,但是有时候这两个框架需要混合着用,虽然不推荐.但有时候混合用时,却非常方便 ...

  7. angualrjs学习总结三(http、select、表格、指令以及事件)

    一:http XMLHttpRequest:$http是angularjs的一个核心服务,用于读取远程服务器的数据.$http.get(url) 是用于读取服务器数据的函数.举例:<div ng ...

  8. Angularjs ngTable使用备忘

    项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. ...

  9. AngularJS 表格

    ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...

随机推荐

  1. 关于dispatchTouchEvent, onInterceptTouchEvent, onTouchEvent的分发机制浅析

    虽说这个问题不是很难...动动手就能看出答案...但是似乎不太容易理解...几次尝试把这个问题说明白....但是好像感觉说不明白....(顿时想起了那句话----说不明白就是自己还不明白! 我怎么可能 ...

  2. 详解ARM的AMBA设备中的 DMA设备PL08X的Linux驱动

    1. 此文目的记录笔者对ARM的PL08x的DMA驱动PL08x.c理解.给其他不熟悉此DMA驱动的读者一点借鉴和参考.2. 适合读者你已经具备一定驱动编程能力,知道一些最基本的概念,比如用于输出输出 ...

  3. 杂乱无章之Oracle（一）

    1. 设置共享池大小 SQL>ALTER  SYSTEM  SET  SHARED_POOL_SIZE=32M; 2. 数据库高速缓冲区(database  buffer  cache):SQL ...

  4. WdatePicker时间控件联动选择

    $("#txtStartTime").bind("click focus", function () { var endtimeTf = $dp.$('txtE ...

  5. Syntax highlighter for CKEditor

    http://www.cnblogs.com/moozi/archive/2010/01/06/1640034.html

  6. Linux文件与目录管理之ls的使用

    来源:鸟哥的私房菜 查看文件与目录 ls ls [-aAdfFhilnrRSt] 目录名 ls [--color={never,auto,always}] ls [--full-time] 目录名 选 ...

  7. The Signals Of Process Communication

    在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...

  8. 使用GBK编码请求访问nodejs程序报415错误：Error: unsupported charset at urlencodedParser ...

    最近遇到一个问题,第三方用户向我们提供给的回调地址发送请求时一直报415错误,结果发现他们使用的是GBK编码请求,而我们使用的node + express4 程序,不支持GBK编码请求. 问题出在下面 ...

  9. iOS 视频开发-AVPlayer

    如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...

  10. Asp.Net MVC 路由 【转】

    原文链接:http://www.asp.net/learn/mvc/ 在这篇教程中,我将为你介绍每个ASP.NET MVC应用程序都具有的一个重要功能,称作ASP.NET路由(ASP.NET Rout ...