AngularJS 表格
2016-07-22 17:58
393 查看
1、表格概述
ng-repeat 指令可以完美的显示表格。
2、使用 CSS 样式
3、使用 orderBy 过滤器
排序显示,可以使用 orderBy 过滤器:
4、使用 uppercase 过滤器
5、显示序号 index
表格显示序号可以在 td 中添加 $index:
6、使用 even 和 odd
ng-repeat 指令可以完美的显示表格。
<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>
2、使用 CSS 样式
<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 }}</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>
3、使用 orderBy 过滤器
排序显示,可以使用 orderBy 过滤器:
<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
4、使用 uppercase 过滤器
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table>
5、显示序号 index
表格显示序号可以在 td 中添加 $index:
<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
6、使用 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>
相关文章推荐
- Angularjs 跨域请求
- 表格标签table深入了解
- table 隔列(行)换色效果让表格结构更清淅
- table高级应用把表格进行到底(必看)
- VB返回记录集结果到HTML表格的方法
- 表格高级使用技巧_把表格进行到底(必看)
- C#实例代码之抽奖升级版可以经表格数据导入数据库,抽奖设置,补抽
- C#实现动态生成表格的方法
- JS实现动态表格的添加,修改,删除功能(推荐)
- Bootstrap表格和栅格分页实例详解
- jQuery实现获取table表格第一列值的方法
- JS实现控制表格行文本对齐的方法
- js实现当鼠标移到表格上时显示这一格全部内容的代码
- JS动态显示表格上下frame的方法
- JS实现两表格里数据来回转移的方法
- javascript表格随机排序代码
- JavaScript生成带有缩进的表格代码
- js获取表格的行数和列数的方法
- 第六篇Bootstrap表格样式介绍
- JS实现动态生成表格并提交表格数据向后端