1、AngularJS 表格

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

　　AngularJS 实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

</head>

<body>

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

<table>

  <tr ng-repeat="x in names">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

</div>

<script>

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

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

    $http.get("sites.json")

    .then(function (result) {

        $scope.names = response.data.sites;

    });

});

</script>

　　

　　2. 使用 orderBy 过滤器

 <tr ng-repeat="x in names | orderBy : 'Country'">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

　　

　　3. 使用 uppercase 过滤器

<table>

  <tr ng-repeat="x in names">

    <td>{{ x.Name }}</td>

    <td>{{ x.Country | uppercase }}</td>

  </tr>

</table>

　　4. 显示序号 ($index)

<table>

  <tr ng-repeat="x in names">

    <td>{{ $index + 1 }}</td>

    <td>{{ x.Name }}</td>

    <td>{{ x.Country }}</td>

  </tr>

</table>

　　5. 使用 $even 和 $odd

<table>

<tr ng-repeat="x in names">

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

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

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

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

</tr>

</table>

2、代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <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 src="js/angular.min.js"></script>

</head>

<body>

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

        <table>

            <tr ng-repeat="x in names">

                <td>{{ $index + 1 }}</td>

                <td>{{ x.Name }}</td>

                <td>{{ x.Country }}</td>

                <td>{{ x.Url }}</td>

            </tr>

        </table>

        <table>

            <tr ng-repeat="x in names">

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

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

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

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

            </tr>

        </table>

    </div>

</body>

</html>

<script>

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

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

        $http({

            method: 'GET',

            url: 'sites.json'

        }).then(function successCallback(response) {

            $scope.names = response.data.sites;

        }, function errorCallback(response) {

            // 请求失败执行代码

        });

    });

</script>

AngularJS学习之旅—AngularJS Table(十一)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  8. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

  9. AngularJS学习之旅—AngularJS Http(九)

    1.AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. eg: // 简单的 GET 请求,可以改为 POST $htt ...

随机推荐

  1. python编译、运行、反编译pyc文件

    为了加密 .py 文件,以前一般使用打包成 exe ,但是最近发现可以将其编译成二进制文件 pyc ,虽然反编译难度不大,但是也需要一些水平 编译生成 pyc: 单个文件 代码: import py_ ...

  2. 【从零开始自制CPU之学习篇07】最简单的ALU—全加器

    ALU是算术逻辑单元,是CPU中重要的一部分,因为CPU本质上就是不断重复最简单的计算.而我们这一版CPU的ALU部分更为简单,是一个只能做加法的ALU. 理论部分 我们需要一个能帮我们进行数学计算的 ...

  3. 【3分钟就会系列】使用Ocelot+Consul搭建微服务吧!

    一.什么Ocelot? API网关是一个服务器,是系统的唯一入口.API 网关一般放到微服务的最前端,并且要让API 网关变成由应用所发起的每个请求的入口.这样就可以明显的简化客户端实现和微服务应用程 ...

  4. Solr 01 - 什么是Solr + Solr安装包目录结构说明

    目录 1 Solr概述 1.1 Solr是什么 1.2 Solr与Lucene的区别 2 Solr文件说明 2.1 Solr的目录结构 2.2 其他常用概念说明 2.3 创建基础文件目录 2.4 so ...

  5. HBase查询优化

    1.概述 HBase是一个实时的非关系型数据库,用来存储海量数据.但是,在实际使用场景中,在使用HBase API查询HBase中的数据时,有时会发现数据查询会很慢.本篇博客将从客户端优化和服务端优化 ...

  6. CVE漏洞—PHPCMS2008 /type.php代码注入高危漏洞预警

    11月4日,阿里云安全首次捕获PHPCMS 2008版本的/type.php远程GetShell 0day利用攻击,攻击者可以利用该漏洞远程植入webshell,导致文件篡改.数据泄漏.服务器被远程控 ...

  7. 手把手教您将 libreoffice 移植到函数计算平台

    LibreOffice 是由文档基金会开发的自由及开放源代码的办公室套件.LibreOffice 套件包含文字处理器.电子表格.演示文稿程序.矢量图形编辑器和图表工具.数据库管理程序及创建和编辑数学公 ...

  8. MySQL 索引及查询优化总结

    本文由云+社区发表 文章<MySQL查询分析>讲述了使用MySQL慢查询和explain命令来定位mysql性能瓶颈的方法,定位出性能瓶颈的sql语句后,则需要对低效的sql语句进行优化. ...

  9. Linux万能快捷键与命令

    tab键:补全命令 \ :命令折行写 Ctrl+C :结束命令 --help :查看命令详细信息 man :类似于help 比help更加详细. sudo :临时以管理员权限执行命令. 还有吗?

  10. 深入浅出Java类加载过程

    学习笔记二之Java虚拟机中类加载的过程 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现这个类进行初始化. 1.    加载 加载,是指Java虚拟机查找字 ...