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. python中文处理之encode/decode函数

    python中文处理相信迷惑过不少同学.下面说说python2/3的encode和decode函数. python2中,使用decode()和encode()来进行解码和编码,以unicode类型作为 ...

  2. Linux shell 脚本攻略之生成任意大小的文件

    摘自:<Linux shell 脚本攻略>

  3. iOS 开发常用宏

    来源:iOS_小松哥 链接:http://www.jianshu.com/p/be00c3f3cafd 大家都是知道使用宏不仅方便,而且可以提高开发效率.下面总结了iOS开发过程中的一些常用宏,会持续 ...

  4. 沈逸老师ubuntu速学笔记（1）--安装flashplayer，配置中文输入法以及常用命令

    开篇首先感谢程序员在囧途(www.jtthink.com)以及沈逸老师,此主题笔记主要来源于沈老师课程.同时也感谢少年郎,秦少.花旦等同学分享大家的学习笔记. 1.安装flash player ctr ...

  5. 错误与修复：ASP.NET无法检测IE10，导致_doPostBack未定义JavaScript错误，恒处于FF5卷动条位置

    浏览器版本号继续升级过程中.IE9诞生了,IE10 也即将问世,火狐5和6已经发布了,而7和8也快出现了,Opera已经到了11,Chrome还在继续,我也不知道,应该总在14和50之间吧.不管怎样, ...

  6. mongoDB 用java连接

    (1)下载连接java 的驱动包mongo-2.10.1.jar 下载网址 https://github.com/mongodb/mongo-java-driver/downloads (2)导入下载 ...

  7. Linux下的权限掩码umask

    权限掩码umask 我们都知道在linux下创建一个文件或者目录之后是可以通过chmod等命令进行权限设置,来达到给当前用户.用户组用户以及其他用户分配不同的访问权限.那么,我们新创建的目录和文件本身 ...

  8. hdu1565 网络流或状态压缩DP

    对于网络流有一个定理: 最小点权覆盖集=最大网络流: 最大点权独立集=总权值-最小点权覆盖集: 网络流解法代码如下: #include<cstdio> #include<iostre ...

  9. C# WPF 连接数据库Sqlhelper类

    从视频上学习到的WPF连接数据库的方法 需要配置一个 configuration 文件,包含 SQL instance 的相关信息 using System; using System.Collect ...

  10. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...