-
[AngularJS] 7. Table - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:19
AngularJS Tables
ng-repeat 지시어는 테이블형식으로 보여주기에 완벽합니다.1. Displaying Data in a TableAugular를 이용한 테이블 표시는 매우 간단합니다:12345678910111213141516171819202122232425262728<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><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.w3schools.com/angular/customers.php").success(function (response) {$scope.names = response.records;});});</script></body></html>cs 2. Displaying with CSS Style깔끔하게 만들기 위해서, 페이지에 CSS를 추가합니다:1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html><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><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><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.w3schools.com/angular/customers.php").success(function (response) {$scope.names = response.records;});});</script></body></html>cs 3. Display with orderBy Filter테이블을 정렬하기 위해서, orderBy 필터를 추가합니다:1234567<table><tr ng-repeat="x in names | orderBy : 'Country'"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr></table>cs 4. Display with uppercase Filter대문자로 표시하기 위해서, uppercase 필터를 추가합니다:123456<table><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country | uppercase}}</td></tr></table>cs 5. Display the table Index ($index)테이블 인덱스를 표시하기위해, <td> 태그에 $index를 추가합니다:1234567<table><tr ng-repeat="x in names"><td>{{ $index + 1 }}</td><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr></table>cs 6. Using $even and $odd1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html><style>table, td {border: 1px solid grey;border-collapse: collapse;padding: 5px;}</style><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><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("http://www.w3schools.com/angular/customers.php").success(function (response) {$scope.names = response.records;});});</script></body></html>cs * 위 강좌는 W3Schools 를 참고하여 작성하였습니다.'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 10. HTML Event - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 9. HTML DOM - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 8. SQL - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 5. 필터(filter) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 4. 제어(controller) - Angular JS 강좌 (0) 2015.06.12
