首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS入门教程之表格实例详解

Posted in Javascript onJuly 27, 2016

AngularJS 表格

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

在表格中显示数据

使用 angular 显示表格是非常简单的：

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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("/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

运行结果：

Alfreds Futterkiste Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Around the Horn UK
B's Beverages UK
Berglunds snabbköp Sweden
Blauer See Delikatessen Germany
Blondel père et fils France
Bólido Comidas preparadas Spain
Bon app' France
Bottom-Dollar Marketse Canada
Cactus Comidas para llevar Argentina
Centro comercial Moctezuma Mexico
Chop-suey Chinese Switzerland
Comércio Mineiro Brazil

 使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

CSS 样式

</style>
</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("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

 运行结果：

Alfreds Futterkiste Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Around the Horn UK
B's Beverages UK
Berglunds snabbköp Sweden
Blauer See Delikatessen Germany
Blondel père et fils France
Bólido Comidas preparadas Spain
Bon app' France
Bottom-Dollar Marketse Canada
Cactus Comidas para llevar Argentina
Centro comercial Moctezuma Mexico
Chop-suey Chinese Switzerland
Comércio Mineiro Brazil

 使用 orderBy 过滤器

排序显示，可以使用 orderBy 过滤器:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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>
</head>
<body>

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

<table>
 <tr ng-repeat="x in names | orderBy : 'Country'">
 <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("/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

 运行效果：

 

Cactus Comidas para llevar Argentina
Comércio Mineiro Brazil
Bottom-Dollar Marketse Canada
Blondel père et fils France
Bon app' France
Alfreds Futterkiste Germany
Blauer See Delikatessen Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Centro comercial Moctezuma Mexico
Bólido Comidas preparadas Spain
Berglunds snabbköp Sweden
Chop-suey Chinese Switzerland
Around the Horn UK
B's Beverages UK

 使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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>
</head>
<body>

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

<table>
 <tr ng-repeat="x in names">
 <td>{{ x.Name }}</td>
 <td>{{ x.Country | uppercase }}</td>
 </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

运行效果：

Alfreds Futterkiste GERMANY
Ana Trujillo Emparedados y helados MEXICO
Antonio Moreno Taquería MEXICO
Around the Horn UK
B's Beverages UK
Berglunds snabbköp SWEDEN
Blauer See Delikatessen GERMANY
Blondel père et fils FRANCE
Bólido Comidas preparadas SPAIN
Bon app' FRANCE
Bottom-Dollar Marketse CANADA
Cactus Comidas para llevar ARGENTINA
Centro comercial Moctezuma MEXICO
Chop-suey Chinese SWITZERLAND
Comércio Mineiro BRAZIL

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<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>
</head>
<body>

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

<table>
 <tr ng-repeat="x in names">
 <td>{{ $index + 1 }}</td>
 <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("/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

运行效果：

1 Alfreds Futterkiste Germany
2 Ana Trujillo Emparedados y helados Mexico
3 Antonio Moreno Taquería Mexico
4 Around the Horn UK
5 B's Beverages UK
6 Berglunds snabbköp Sweden
7 Blauer See Delikatessen Germany
8 Blondel père et fils France
9 Bólido Comidas preparadas Spain
10 Bon app' France
11 Bottom-Dollar Marketse Canada
12 Cactus Comidas para llevar Argentina
13 Centro comercial Moctezuma Mexico
14 Chop-suey Chinese Switzerland
15 Comércio Mineiro Brazil

使用 $even 和 $odd

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
</style>
</head>
<body>

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

<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>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

运行效果：

Alfreds Futterkiste Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Around the Horn UK
B's Beverages UK
Berglunds snabbköp Sweden
Blauer See Delikatessen Germany
Blondel père et fils France
Bólido Comidas preparadas Spain
Bon app' France
Bottom-Dollar Marketse Canada
Cactus Comidas para llevar Argentina
Centro comercial Moctezuma Mexico
Chop-suey Chinese Switzerland
Comércio Mineiro Brazil

以上就是对AngularJS 表格资料的整理，后续继续补充,希望能帮助到有需要的同学。

AngularJS入门教程之表格实例详解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
AngularJS语法详解
Jan 23 Javascript
javascript文本模板用法实例
Jul 31 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传（下）
Apr 21 Javascript
webpack实用小功能介绍
Jan 02 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
基于jQuery实现仿微博发布框字数提示
Jul 27 #Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 #Javascript
关于JS中的方法是否加括号的问题
Jul 27 #Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 #Javascript
AngularJS入门教程之服务(Service)
Jul 27 #Javascript
AngularJS 过滤器的简单实例
Jul 27 #Javascript
AngularJS延迟加载html template
Jul 27 #Javascript
vue-esign(1) 蒙特卡罗(1) matplotlib(7) 微信小程序(9) pdfkit(1) Pillow(2) bufio(1) 可视化动图(1) WeUI(1) ipyvizzu(1)
You might like
11个PHP 分页脚本推荐
2011/08/15 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jquery动态添加删除div 具体实现
2013/07/20 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Pycharm学习教程（6） Pycharm作为Vim编辑器使用
2017/05/03 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python 实现A*算法的示例代码
2018/08/13 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python 制作简单的音乐播放器
2020/11/25 Python
Stutterheim瑞典：瑞典高级外套时装品牌
2019/06/24 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
新手上路标语
2014/06/20 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014年班级工作总结
2014/11/14 职场文书
三孔导游词
2015/02/05 职场文书
研究生简历自我评
2015/03/11 职场文书
员工工作表扬信
2015/05/05 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
什么是css原子化，有什么用？
2022/04/24 HTML / CSS