AngularJS 테이블: 정렬, OrderBy 및 대문자 필터 [예]
제임스 하트만
테이블은 웹 페이지 작업 시 HTML에서 사용되는 일반적인 요소 중 하나입니다.
HTML의 테이블은 HTML 태그를 사용하여 디자인되었습니다.
- tag - 테이블을 표시하는 데 사용되는 기본 태그입니다.
- – 이 태그는 테이블 내에서 행을 분리하는 데 사용됩니다.
- – 이 태그는 실제 테이블 데이터를 표시하는 데 사용됩니다.
- – 테이블 헤더 데이터에 사용됩니다.
위의 사용 가능한 HTML 태그를 다음과 함께 사용하세요. AngularJS와을 사용하면 테이블 데이터를 더 쉽게 채울 수 있습니다. 즉, ng-repeat 지시문은 테이블 데이터를 채우는 데 사용됩니다.
이번 장에서는 이를 달성하는 방법을 살펴보겠습니다. 또한 $index 속성을 사용하여 Angular 테이블 인덱스를 표시하는 것과 함께 orderby 및 대문자 필터를 사용하는 방법도 살펴보겠습니다.
테이블에 데이터 채우기 및 표시
이 장의 소개 부분에서 논의한 것처럼 HTML 페이지에서 테이블 구조를 생성하는 기본은 동일하게 유지됩니다.
테이블의 구조는 여전히 다음의 일반 HTML 태그를 사용하여 생성됩니다. , , 그리고 . 그러나 데이터는 AngularJS에서 ng-repeat 지시문을 사용하여 채워집니다.
Angular 테이블을 구현하는 방법에 대한 간단한 예를 살펴보겠습니다.
이 예에서,
강좌 주제와 설명이 포함된 Angular 테이블을 만들겠습니다.
단계 1) 먼저 HTML 페이지에 "스타일" 태그를 추가하여 테이블이 적절한 테이블로 표시되도록 하겠습니다.
- 스타일 태그가 HTML 페이지에 추가됩니다. 이는 HTML 요소에 필요한 서식 속성을 추가하는 표준 방법입니다.
- 우리는 테이블에 두 가지 스타일 값을 추가하고 있습니다.
- 하나는 Angular 테이블에 견고한 테두리가 있어야 하고
- 두 번째는 Angular 테이블 데이터에 패딩이 있어야 한다는 것입니다.
단계 2) 다음 단계는 테이블을 생성하는 코드와 데이터를 작성하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
</head>
<body>
<title>Event Registration</title>
<style>
table,th,td{
border: 1px solid grey;
padding:5px;
}
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr ng-repeat="ptutor in tutorial">
<td>{{ptutor.Name}}</td>
<td>{{ptutor.Description}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope) {
$scope.tutorial = [
{Name:"Controllers",Description :"Controllers in action"},
{Name:"Models",Description :"Models and binding data"},
{Name:"Directives",Description :"Flexibility of Directives"}
]});
</script>
</body>
</html>
코드 설명
- 먼저 “tutorial”이라는 변수를 생성하고 한 단계에서 일부 키-값 쌍을 할당합니다. 각 키-값 쌍은 테이블을 표시할 때 데이터로 사용됩니다. 그런 다음 튜토리얼 변수가 범위 개체에 할당되어 보기에서 액세스할 수 있습니다.
- 이것이 테이블 생성의 첫 번째 단계이며, 우리는 다음을 사용합니다. 꼬리표.
- 각 데이터 행에 대해 "ng-repeat 지시어"를 사용하고 있습니다. 이 지시어는 ptutor 변수를 사용하여 튜토리얼 범위 객체의 각 키-값 쌍을 살펴봅니다.
- 마지막으로, 우리는 키-값 쌍(ptutor.Name 및 ptutor.name)과 함께 태그를 지정합니다.Description)을 사용하여 Angular 테이블 데이터를 표시합니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
산출
위의 출력에서,
- 컨트롤러에 정의된 키-값 쌍의 배열의 데이터가 테이블에서 올바르게 표시되는 것을 볼 수 있습니다.
- 테이블 데이터는 "ng-repeat 지시문"을 사용하여 각 키-값 쌍을 거치면서 생성되었습니다.
AngularJS 내장 필터
AngularJS에 내장된 필터를 사용하여 데이터가 테이블에 표시되는 방식을 변경하는 것은 매우 일반적입니다. 우리는 이미 이전 장에서 필터가 작동하는 것을 보았습니다. 계속하기 전에 필터에 대해 간단히 요약해 보겠습니다.
Angular.JS에서 필터는 사용자에게 표시되기 전에 표현식의 값을 포맷하는 데 사용됩니다. 필터의 예로는 문자열 출력을 받아서 문자열을 포맷하고 문자열의 모든 문자를 대문자로 표시하는 'uppercase' 필터가 있습니다.
따라서 아래 예에서 'TutorialName' 변수의 값이 'AngularJS'인 경우 아래 표현식의 출력은 'ANGULARJS'가 됩니다.
{{ TurotialName | uppercase }}
이 섹션에서는 테이블에서 orderBy 및 대문자 필터를 사용하는 방법을 더 자세히 살펴보겠습니다.
OrderBy 필터를 사용하여 테이블 정렬
이 필터는 테이블 열 중 하나를 기준으로 테이블을 정렬하는 데 사용됩니다. 이전 예에서 Angular 테이블 데이터의 출력은 아래와 같이 나타났습니다.
| 컨트롤러 | 작동 중인 컨트롤러 |
| 모델 | 모델 및 바인딩 데이터 |
| 지시어 | 지시어의 유연성 |
"orderBy" 필터를 사용하고 테이블의 첫 번째 열을 사용하여 Angular 테이블 데이터를 정렬하는 방법에 대한 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
</head>
<body>
<title>Event Registration</title>
<style>
table,th,td{
border: 1px solid grey;
padding:5px;
}
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
<td>{{ptutor.Name}}</td>
<td>{{ptutor.Description}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope) {
$scope.tutorial = [
{Name:"Controllers",Description :"Controllers in action"},
{Name:"Models",Description :"Models and binding data"},
{Name:"Directives",Description :"Flexibility of Directives"}
]});
</script>
</body>
</html>
코드 설명
- 우리는 테이블을 생성할 때와 동일한 코드를 사용하고 있습니다. 이번에는 유일한 차이점은 ng-repeat 지시문과 함께 "orderBy" 필터를 사용한다는 것입니다. 이 경우 "이름" 키를 기준으로 테이블을 정렬하려고 합니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
산출
출력에서,
- Angular 테이블의 데이터가 첫 번째 열의 데이터에 따라 정렬된 것을 볼 수 있습니다. 데이터 세트에서 "지시문" 데이터는 "모델" 데이터에서 가져오지만 orderBy 필터를 적용했기 때문에 테이블이 그에 따라 정렬됩니다.
대문자 필터가 포함된 테이블 표시
대문자 필터를 사용하여 Angular 테이블의 데이터를 대문자로 변경할 수도 있습니다.
이를 달성할 수 있는 방법에 대한 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
</head>
<body>
<title>Event Registration</title>
<style>
table,th,td{
border: 1px solid grey;
padding:5px;
}
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr ng-repeat="ptutor in tutorial">
<td>{{ptutor.Name | uppercase}}</td>
<td>{{ptutor.Description}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope) {
$scope.tutorial = [
{Name:"Controllers",Description :"Controllers in action"},
{Name:"Models",Description :"Models and binding data"},
{Name:"Directives",Description :"Flexibility of Directives"}
]});
</script>
</body>
</html>
코드 설명
- 우리는 테이블을 만들 때와 같은 코드를 사용하고 있으며, 이번에는 대문자 필터를 사용한다는 점만 다릅니다. 우리는 이 필터를 "ptutor.Name"과 함께 사용하여 첫 번째 열의 모든 텍스트가 대문자로 표시되도록 합니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
산출
출력에서,
- "대문자" 필터를 사용하면 첫 번째 열의 모든 데이터가 대문자로 표시되는 것을 볼 수 있습니다.
테이블 인덱스 표시($index)
테이블 인덱스를 표시하려면 $인덱스로.
이를 달성할 수 있는 방법에 대한 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
</head>
<body>
<title>Event Registration</title>
<style>
table,th,td{
border: 1px solid grey;
padding:5px;
}
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<table>
<tr ng-repeat="ptutor in tutorial">
<td>{{$index + 1}}</td>
<td>{{ptutor.Name}}</td>
<td>{{ptutor.Description}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope) {
$scope.tutorial = [
{Name:"Controllers",Description :"Controllers in action"},
{Name:"Models",Description :"Models and binding data"},
{Name:"Directives",Description :"Flexibility of Directives"}
]});
</script>
</body>
</html>
코드 설명
- 우리는 테이블을 생성할 때 사용했던 것과 동일한 코드를 사용하고 있으며, 이번에 유일한 차이점은 인덱스 열을 표시하기 위해 테이블에 행을 하나 더 추가한다는 것입니다. 이 추가 열에서 우리는 AngularJS가 제공하는 "$index" 속성을 사용한 다음 +1 연산자를 사용하여 각 행의 인덱스를 증가시킵니다.
코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.
산출
출력에서,
- 추가 열이 생성된 것을 확인할 수 있습니다. 이 열에서는 각 행에 대해 생성되는 인덱스를 볼 수 있습니다.
요약
- 테이블 구조는 다음에서 사용 가능한 표준 태그를 사용하여 생성됩니다. HTML. 테이블의 데이터는 "ng-repeat" 지시문을 사용하여 채워집니다.
- orderBy 필터를 사용하면 테이블 내의 모든 열을 기준으로 테이블을 정렬할 수 있습니다.
- 대문자 필터를 사용하면 텍스트 기반 열의 데이터를 대문자로 표시할 수 있습니다.
- "$index" 속성을 사용하여 테이블의 인덱스를 만들 수 있습니다.
- AngularJS.JS 테이블을 사용하여 개발하는 동안 발생하는 일반적인 문제 중 하나는 1000개 이상의 데이터 행이 있는 대규모 데이터 세트를 구현하는 것입니다. 때로는 ng-반복 지시문이 응답하지 않을 수 있으므로 때때로 전체 페이지가 응답하지 않게 됩니다. 이러한 경우에는 데이터 행이 여러 페이지에 걸쳐 분산되어 있는 페이지 매김을 사용하는 것이 항상 더 좋습니다.
