angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.books = [ {
... (아래의 코드를 참조) ...
} ];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
ng-repeat를 사용하여 JSON 형식의 데이터를 반복하여 출력한다. 여기서 orderBy:myOrderBy라고 필터를 적용하였는데 ng-click으로 선언한 헤더를 클릭할 때 해당 값이 myOrderBy에 전달되고 바로 바인딩되어 테이블에 클릭한 칼럼의 이름으로 정렬된다.
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('price')">Price</th>
</tr>
<tr ng-repeat="x in books | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.price}}</td>
</tr>
</table>
예제의 전체코드이다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" type="text/javascript"></script>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.books = [ {
"id" : "id1",
"name" : "MongoDB",
"price" : 16000
}, {
"id" : "id2",
"name" : "Express",
"price" : 12000
}, {
"id" : "id3",
"name" : "AngularJS",
"price" : 13000
}, {
"id" : "id4",
"name" : "Node.js",
"price" : 15000
}, {
"id" : "id5",
"name" : "jQuery Mobile",
"price" : 11000
} ];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('price')">Price</th>
</tr>
<tr ng-repeat="x in books | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.price}}</td>
</tr>
</table>
</div>
<hr>
</body>
</html>
아래와 같이 화면에 표시된다. 첫 화면에서는 컨트롤러에서 할당한 값이 바로 표시된다.
Name 헤더를 클릭하면 Name으로 정렬되어 표시된다.
Price 헤더를 클릭하면 Price로 정렬되어 표시된다.
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] Bootstrap을 적용한 간단한 장바구니를 만들어보자 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시 (0) | 2023.02.22 |
| [AngularJS] 폼 입력항목 AngularJS의 유효성검사 (0) | 2023.02.22 |
| [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 (0) | 2023.02.22 |
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
댓글