angularjs table 예제
- Front-end
- 2019. 10. 20. 01:05
inflearn 의 Start Google Angular.js 앵귤러 과정 강좌를 보고 정리한 내용입니다.
https://www.inflearn.com/course/angular-js
angularjs table 예제
app.controller 에서 선언한 data1 변수 내의 값을 <tr ng-repeat="obj in data1">로 접근합니다.
ng-repeat 은 for 문으로 생각하면되고, obj.name, obj.age 로 data1 에서 선언한 변수에 접근할 수 있습니다.
<tr> 태그는 테이블의 행을 만드는 html 태그로 <tr> 태그 내에 열을 만드는 <td> 태그에 obj.name, obj.age 데이터를 출력하면서 테이블을 만드는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<title>Insert title here</title>
<script>
var app = angular.module("test_app", [])
app.controller("controller1", function($scope, $http){
$scope.data1 = [
{
name : "홍길동",
age : 20
},
{
name : "강길동",
age : 21
},
{
name : "최길동",
age : 22
}
]
var http = $http.get("data1.html")
http.then(function(response){
$scope.data2 = response.data
})
})
</script>
</head>
<body>
<div ng-app="test_app" ng-controller="controller1">
<table border="1">
<tr ng-repeat="obj in data1">
<td>{{$index + 1}}</td>
<td ng-if="$odd" style="color:red">{{obj.name}}</td>
<td ng-if="$even" style="color:black">{{obj.name}}</td>
<td>{{obj.age}}</td>
</tr>
</table>
<hr/>
<table border="1">
<tr ng-repeat="obj in data2">
<td>{{$index + 1}}</td>
<td ng-if="$odd" style="color:red">{{obj.name}}</td>
<td ng-if="$even" style="color:black">{{obj.name}}</td>
<td>{{obj.age}}</td>
</tr>
</table>
</div>
</body>
</html>
angularjs 관련 다른 글 ▼
angular js 예제, 강의 정리 (module, controller, service, factory)
angular js scope와 rootscope 의 차이