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. [武汉集训] Cliquers

    题意 设把\(n\)个不同元素分成若干个大小相等的集合的方案个数为\(res\),求\(m^{res}\)模\(10^9-401\)后的余数. (n,m不超过2*10^9) 分析 可以知道,所求答案为 ...

  2. BBS论坛（二十二）

    22.1.七牛js上传轮播图图片 (1)common/zlqiniu.js 'use strict'; var zlqiniu = { 'setup': function (args) { var d ...

  3. 学生选课系统 c语言

    /********************************* *主题:学生选修课程系统设计 * *设计要求: *1.添加功能:程序能够任意添加课程和学生记录,可提供选择界面供用户选择所需要添加 ...

  4. 学习-xlsxwriter模块

    Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,numbers,formulas 公式以及hyperlinks超链接. 可以完成xlsx文件的自动化构造,包括 ...

  5. JS 中 原生方法 (四) --- Object

    Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道, ...

  6. pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; try restarting transaction')错误处理

    问题描述: 在使用pymysql库时,利用游标执行插入操作,产生错误,会出现pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; ...

  7. 补习系列(2)-springboot mime类型处理

    目标 了解http常见的mime类型定义: 如何使用springboot 处理json请求及响应: 如何使用springboot 处理 xml请求及响应: http参数的获取及文件上传下载: 如何获得 ...

  8. Tomcat多实例部署

    前言 以前总是采用很Low的方式太同一台服务器上部署多个Web应用,步骤是这样的:Copy Tomcat目录-->更改conf/server.xml三个端口号----->部署war包--- ...

  9. .Net语言 APP开发平台——Smobiler学习日志：如何快速实现按钮组功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobil ...

  10. WPF 中图片的加载 ，使用统一资源标识符 (URI)

    在wpf中,设置图片路径有2种方法: 1.xaml文件中,指定路径 <Button Name=" HorizontalAlignment="Right" Verti ...