AngularJS 表格
【摘要】
ng-repeat 指令可以完美的显示表格。
使用 angular 显示表格是非常简单的:
+ View Code?1234567891011121314151617181920212223242526272829<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.r...
ng-repeat 指令可以完美的显示表格。
使用 angular 显示表格是非常简单的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
|
为了让页面更加美观,我们可以在页面中使用CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
</ html >
|
使用orderBy过滤器:
排序显示,可以使用 orderBy 过滤器:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
|
使用 uppercase 过滤器:
用 uppercase 过滤器转换为大写:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
|
显示序号($index):
表格显示序号可以在 <td> 中添加 $index:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
|
使用$even和$odd:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<! DOCTYPE html>
< html >
< head >
< meta charset="utf-8">
< script src="http://cdn.static.runoob.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 >
|
文章来源: www.cnblogs.com,作者:姜腾腾,版权归原作者所有,如需转载,请联系作者。
原文链接:www.cnblogs.com/jiangtengteng/p/5983188.html
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)