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. Mysql的两种“排名第几且有可能为空的记录”写法（力扣176）

    编写一个 SQL 查询,获取 Employee 表中第二高的薪水(Salary) . +----+--------+ | Id | Salary | +----+--------+ | 1 | 100 ...

  2. python网络-多线程(22)

    一.什么是线程 线程(英语:thread)是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.同一进程中的多条线程将共享该进程中的全部系统资源,一个进程可以有很多线程,每 ...

  3. 带着萌新看springboot源码02

    上一节讲到先创建maven项目,然后导入依赖,主配置类等步骤,现在来个快速创建一个springboot模板,不需要向上节那么繁琐. 1.快速创建springboot应用 IDEA---->fil ...

  4. cmake安装配置及入门指南

    前言 今天,从github下载代码学习,让我用cmake编译,纳尼?make我知道,cmake是啥鬼?天啊,无知很可怕!赶紧mark一波,虽然很耽误学习进度,但感觉还是要get一波! 一.安装准备 感 ...

  5. Java类文件的结构

    Class文件是以8位字节为基础单位的二进制流,各部分中间没有分隔符.遇到8位字节以上的空间数据项时,则会按照高位在前的方式分割成若干个8位字节进行存储. Class文件采用类似C语言的伪结构体来存储 ...

  6. Java开发知识之Java入门

    Java开发知识之Java入门 一丶了解JAVA的版本 JAVA 有三个版本 JAVA SE: 标准版,开发桌面跟商务应用程序 JAVA SE 包括了Java的核心类库,集合,IO 数据库连接 以及网 ...

  7. 5分钟入门git模式开发

    本文由云+社区发表 作者:唐维黎 导语 基于gui工具TortoiseGit让你快速进入git开发模式. 目前项目已逐步从svn移步到git开发模式,其中也针对git统一协议了适合git的开发规范, ...

  8. Docker Compose 引用环境变量

    在项目中,往往需要在 docker-compose.yml 文件中使用环境变量来控制不同的条件和使用场景.本文集中介绍 docker compose 引用环境变量的方式.说明:本文的演示环境为 ubu ...

  9. JVM（四）垃圾回收的实现算法和执行细节

    全文共 1890 个字,读完大约需要 6 分钟. 上一篇我们讲了垃圾标记的一些实现细节和经典算法,而本文将系统的讲解一下垃圾回收的经典算法,和Hotspot虚拟机执行垃圾回收的一些实现细节,比如安全点 ...

  10. SpringCloud(2) 服务注册和发现Eureka Server

    一.简介 EureKa在Spring Cloud全家桶中担任着服务的注册与发现的落地实现.Netflix在设计EureKa时遵循着AP原则,它基于REST的服务,用于定位服务,以实现云端中间层服务发现 ...