首页
所有分类
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 相关文章推荐
JavaScript实现带标题的图片轮播特效
May 20 Javascript
分享Javascript实用方法二
Dec 13 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
js禁止表单重复提交
Aug 29 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
JS实现瀑布流效果
Mar 07 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
基于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
台湾(1) S2000(3) 南麂列岛(1) 森海(1) YB400(2) MX500(1) SRF-S83(1) PL660(1) 直流胆(1) YB235(1)
You might like
谈谈PHP语法(5)
2006/10/09 PHP
PHP多态代码实例
2015/06/26 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
node.js中的console用法总结
2014/12/15 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
nodejs实现大文件（在线视频）的读取
2020/10/16 NodeJs
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
python操作excel的方法
2018/08/16 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python利用faker库批量生成测试数据
2020/10/15 Python
新加坡交友网站：be2新加坡
2019/04/10 全球购物
法国最大的在线眼镜店：EasyLunettes
2019/08/26 全球购物
试用期员工考核制度
2014/01/22 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
工程项目建议书范文
2014/03/12 职场文书
员工年终考核评语
2014/12/31 职场文书
小学感恩主题班会
2015/08/12 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
python中使用redis用法详解
2022/12/24 Redis