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档案袋（ 进程与协程 ）

    Python的进程和线程是使用的操作系统的原生线程和进程,其是去调用操作系统的相应接口实现 进程:之间不可直接共享数据,是资源的集合,进程必须有一个线程 线程:基于进程,之间可直接共享数据,可执行,只 ...

  2. 花点时间顺顺Git（下）

    ### 进入正文前插个楼,因为vim的操作下面会频繁用到 vim的操作 1.输入i进入插入模式,对上一条commit信息的内容进行修改 2.按下ESC键,退出编辑模式,切换到命令模式. 3.保存修改并 ...

  3. [Reversing.kr] Easy Crack Writeup

    题目:http://reversing.kr/ Easy Crack IDA打开.分析可知Sub_401080是关键函数.F5后. 当满足 则跳转成功.拼接后得到flag flag: Ea5yR3ve ...

  4. ThinkPHP 数据库操作(五) : 存储过程、数据集、分布式数据库

    存储过程 5.0支持存储过程,如果我们定义了一个数据库存储过程 sp_query ,可以使用下面的方式调用: $result = Db::query('call sp_query(8)'); 返回的是 ...

  5. JDK1.8源码(一)——java.util.ArrayList

      ArrayList 定义 ArrayList 是一个用数组实现的集合,支持随机访问,元素有序且可以重复. public class ArrayList<E> extends Abstr ...

  6. asp.net core 系列 16 Web主机 IWebHostBuilder

    一.概述 在asp.net core中,Host主机负责应用程序启动和生存期管理.host主机包括Web 主机(IWebHostBuilder)和通用主机(IHostBuilder).Web 主机是适 ...

  7. 【Java基础】【24多线程(上)】

    24.01_多线程(多线程的引入)(了解) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 红蜘 ...

  8. 谈谈.NET Core中基于Generic Host来实现后台任务

    目录 前言 什么是Generic Host 后台任务示例 控制台形式 消费MQ消息的后台任务 Web形式 部署 IHostedService和BackgroundService的区别 IHostBui ...

  9. WPF StringFormat 格式化文本

    StringFormat对特定数据格式的转换 WPF中,对数字/日期等的格式化,可参考此篇博客:https://www.cnblogs.com/zhengwen/archive/2010/06/19/ ...

  10. C# 合并Excel工作表

    文档合并.拆分是实现文档管理的一种有效方式.在工作中,我们可能会遇到需要将多个文档合并的情况,那如何来实现呢,本文将进一步介绍.关于拆分Excel工作表,可参见这篇文章——C#如何拆分EXCEL工作表 ...