AngularJS 表格操作
2016-07-02 13:56
260 查看
http://www.runoob.com/angularjs/angularjs-tables.html
ng-repeat 指令可以完美的显示表格。
使用 angular 显示表格是非常简单的:
<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>
尝试一下
»
为了让页面更加美观,我们可以在页面中使用CSS:
<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>
尝试一下
»
排序显示,可以使用 orderBy 过滤器:
<table>
<tr ng-repeat="x
in names | orderBy : 'Country'">
<td>{{
x.Name }}</td>
<td>{{
x.Country }}</td>
</tr>
</table>
尝试一下
»
使用 uppercase 过滤器转换为大写:
<table>
<tr ng-repeat="x
in names">
<td>{{
x.Name }}</td>
<td>{{
x.Country | uppercase }}</td>
</tr>
</table>
尝试一下
»
表格显示序号可以在 <td> 中添加 $index:
<table>
<tr ng-repeat="x
in names">
<td>{{
$index + 1 }}</td>
<td>{{
x.Name }}</td>
<td>{{
x.Country }}</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>
尝试一下
»
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的:
AngularJS 实例
<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>
尝试一下
»
使用 CSS 样式
为了让页面更加美观,我们可以在页面中使用CSS:
CSS 样式
<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>
尝试一下
»
使用 orderBy 过滤器
排序显示,可以使用 orderBy 过滤器:
AngularJS 实例
<table><tr ng-repeat="x
in names | orderBy : 'Country'">
<td>{{
x.Name }}</td>
<td>{{
x.Country }}</td>
</tr>
</table>
尝试一下
»
使用 uppercase 过滤器
使用 uppercase 过滤器转换为大写:
AngularJS 实例
<table><tr ng-repeat="x
in names">
<td>{{
x.Name }}</td>
<td>{{
x.Country | uppercase }}</td>
</tr>
</table>
尝试一下
»
显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index:
AngularJS 实例
<table><tr ng-repeat="x
in names">
<td>{{
$index + 1 }}</td>
<td>{{
x.Name }}</td>
<td>{{
x.Country }}</td>
</tr>
</table>
尝试一下
»
使用 $even 和 $odd
AngularJS 实例
<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笔记
- 关于Angularjs1.x dom ready
- $resoure服务的简单学习
- ACdream 1429 Rectangular Polygon
- angularjs中关于checkbox的问题
- 《AngularJs实战》笔记
- AngularJS 避繁就简的路由
- AngularJS使用指令增强标准表单元素功能
- AngularJS内建服务$location及其功能详解
- 学习Angularjs分页指令
- angularjs 获取当前时间并转化为字符串
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
- angularJS常用的表单验证指令
- AngularJS优雅的自定义指令
- Angularjs总结(一)表单验证
- Angular directive 实例详解
- angular 深入浅出
- angularjs1.0使用总结
- angularJS $resource与后台restapi的对应关系
- js、Jquery、AngularJs中的extend方法