AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 필터를 적용해서 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다.
<div ng-app="myApp" ng-controller="myCtrl">
컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아 온다.JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재하면 된다. json 데이터를 보면 date 이름으로 배열형태로 담겨져 있어서 response.data로 하였다.
$http.get("./data.json").then(
function(response) {
$scope.data = response.data;
});
});
아래는 ng-repeat 속성으로 데이터를 반복해서 표시하게 된다.
<td>List
<table>
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td>{{ x.name}}</td>
</tr>
</table>
</td>
데이터를 표시할 때 $index을 정의하면 데이터의 인텍스를 표시한다.
인덱스는 0부터 시작하기 때문에 1을 더하여서 표시하였다.
<td>Number
<table>
<tr ng-repeat="x in data">
<td>{{ $index + 1 }}</td>
<td>{{ x.id }}</td>
<td>{{ x.name }}</td>
</tr>
</table>
</td>
데이터를 표시할 때 "name" 필드를 기준으로 정렬한다.
<td>Sorting
<table>
<tr ng-repeat="x in data | orderBy : 'name'">
<td>{{ x.id}}</td>
<td>{{ x.name}}</td>
</tr>
</table>
</td>
데이터를 표시할 때 "name" 필드의 값을 모두 대문자로 변환한다.
<td>Uppercase
<table>
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td>{{ x.name | uppercase }}</td>
</tr>
</table>
</td>
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 3px;
}
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.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("./data.json").then(
function(response) {
$scope.data = response.data;
}
);
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td>List
<table>
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td>{{ x.name}}</td>
</tr>
</table>
</td>
<td>Number
<table>
<tr ng-repeat="x in data">
<td>{{ $index + 1 }}</td>
<td>{{ x.id }}</td>
<td>{{ x.name }}</td>
</tr>
</table>
</td>
<td>Sorting
<table>
<tr ng-repeat="x in data | orderBy : 'name'">
<td>{{ x.id}}</td>
<td>{{ x.name}}</td>
</tr>
</table>
</td>
<td>Uppercase
<table>
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td>{{ x.name | uppercase }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<hr>
</body>
</html>
웹서버 환경설정이 잘 안 되는 분은 아래의 코드로 대체해서 구동하면 된다.
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var data = [ {
"id" : "id1",
"name" : "MongoDB"
}, {
"id" : "id2",
"name" : "Express"
}, {
"id" : "id3",
"name" : "AngularJS"
}, {
"id" : "id4",
"name" : "Node.js"
}, {
"id" : "id5",
"name" : "jQuery Mobile"
} ];
$scope.data = data;
});
</script>
위의 코드에서 사용한 data.json 파일이다.
실제 프로젝트에서는 코드로 데이터를 로딩하겠지만 여기서는 예제를 위해 파일로 생성해 두었다.
{
"data" : [ {
"id" : "id1",
"name" : "MongoDB"
}, {
"id" : "id2",
"name" : "Express"
}, {
"id" : "id3",
"name" : "AngularJS"
}, {
"id" : "id4",
"name" : "Node.js"
}, {
"id" : "id5",
"name" : "jQuery Mobile"
} ]
}
아래와 같이 화면에 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
|---|---|
| [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 (0) | 2023.02.22 |
| [AngularJS] $http 서비스를 이용하여 json을 갖고와 표시해보자. (0) | 2023.02.22 |
| [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. (0) | 2023.02.22 |
| [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. (0) | 2023.02.22 |
댓글