[Angular] AngularJS 튜토리얼 12. 테이블(Table)

[ 테이블에 데이터를 표시하기 ]

 

튜토리얼 11 $http JSON 부분의 데이터를 동일하게 사용한다.

 

	<div ng-app="myApp" ng-controller="customerCtrl">
		<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('customerCtrl', function($scope, $http) {
			$http.get('https://www.w3schools.com/angular/customers.php')
			.then(function(response) {
				$scope.names = response.data.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 필터 적용 ]

 

	<div ng-app="myApp" ng-controller="customerCtrl">
		<table>
			<tr ng-repeat="x in names | orderBy : 'Country'">
				<td>{{x.Name}}</td>
				<td>{{x.Country}}</td>
			</tr>
		</table>
	</div>

 

[ uppercase 필터 적용 ]

 

	<div ng-app="myApp" ng-controller="customerCtrl">
		<table>
			<tr ng-repeat="x in names | orderBy : 'Country'">
				<td>{{x.Name}}</td>
				<td>{{x.Country | uppercase}}</td>
			</tr>
		</table>
	</div>

 

 

[ 테이블 인덱스 표시하기($index) ]

 

	<div ng-app="myApp" ng-controller="customerCtrl">
		<table>
			<tr ng-repeat="x in names | orderBy : 'Country'">
				<td>{{$index + 1}}</td>
				<td>{{x.Name}}</td>
				<td>{{x.Country | uppercase}}</td>
			</tr>
		</table>
	</div>

 

 

[ $even, $odd 활용하기 ]

 

	<div ng-app="myApp" ng-controller="customerCtrl">
		<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>