AngularJS - 필터: 데이터 변환의 친절한 안내서
안녕하세요, 미래의 코딩 슈퍼스타! ? 오늘 우리는 AngularJS 필터의 세상으로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 저는 당신과 함께 있을 것이며, 모든 것을 단계별로 설명할 것입니다. 이 튜토리얼의 끝을 맺을 때, 당신은 프로처럼 데이터를 필터링할 수 있을 것입니다!
AngularJS에서 필터는 무엇인가요?
구체적인 내용에 들어가기 전에, 필터가 무엇인지 이해해 보겠습니다. 마법의 지팡이를 가지고 있다고 상상해 보세요. 데이터를 즉시 변환할 수 있는 지팡이! AngularJS에서 필터는 바로 그런 역할을 합니다! 원래 데이터를 변경하지 않고, 데이터를 다른 형식으로 표시합니다. 멋지죠?
이제 AngularJS에서 가장 자주 사용되는 필터 중 몇 가지를 탐험해 보겠습니다.
대문자 필터: 위대함을 자랑하다
무엇을 합니까?
대문자 필터는 그 이름 그대로 - 문자열의 모든 문자를 대문자로 변환합니다.
어떻게 사용하나요?
<p>{{ "hello, world!" | uppercase }}</p>출력
HELLO, WORLD!설명
이 예제에서는 소문자 문자열 "hello, world!"를 시작합니다. | 기호는 마법의 파이프처럼 우리의 텍스트를 대문자 필터로 보냅니다. 결과는? 자랑스러운 "HELLO, WORLD!"입니다.
소문자 필터: 조용하게 유지하다
무엇을 합니까?
소문자 필터는 대문자 필터와 반대입니다 - 모든 문자를 소문자로 변환합니다.
어떻게 사용하나요?
<p>{{ "SHOUT OUT TO ANGULARJS!" | lowercase }}</p>출력
shout out to angularjs!설명
여기서는 모두 대문자 문자열을 시작합니다. 소문자 필터는 소리를 낮추어, 더 조용한 "shout out to angularjs!"를 제공합니다.
화폐 필터: 돈을 보여주다!
무엇을 합니까?
화폐 필터는 숫자를 화폐로 형식화합니다. 기본적으로는 달러 기호를 사용하지만, 사용자 정의할 수 있습니다.
어떻게 사용하나요?
<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>출력
$9.99
€9.99설명
첫 줄에서는 9.99를 미국 달러로 형식화합니다. 두 번째 줄에서는 필터에 유로 기호를 사용하도록 지정합니다. 마법이 아닌가요?
필터 필터: 이삭 속 바늘 찾기
무엇을 합니까?
필터... 필터(네, 약간 혼란스럽죠!)는 배열을 검색하고 일치하는 항목을 반환하는 데 도움을 줍니다.
어떻게 사용하나요?
<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>
<li ng-repeat="friend in friends | filter:{name:'o'}">
{{friend.name}}
</li>출력
John설명
여기서는 friends 배열에서 'o'를 포함하는 이름을 검색합니다. 오직 John만 일치하므로, 그가만 표시됩니다.
.OrderBy 필터: 순서에 따라 정렬하다
무엇을 합니까?
orderBy 필터는 하나 이상의 기준에 따라 배열을 정렬합니다.
어떻게 사용하나요?
<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>
<li ng-repeat="friend in friends | orderBy:'age'">
{{friend.name}} - {{friend.age}}
</li>출력
John - 25
Mary - 28
Peter - 35설명
이 예제에서는 friends를 나이로 오름차순으로 정렬합니다. 내림차순을 원하면 '-age'를 사용할 수 있습니다.
모두 함께: 위대한 예제
이제 여러 가지 필터를 결합하여 그 힘을 보여드리겠습니다!
<script>
$scope.products = [
{name:'Laptop', price:999.99},
{name:'Smartphone', price:599.99},
{name:'Tablet', price:299.99}
];
</script>
<input type="text" ng-model="searchText">
<table>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>설명
- 우리는 제품의 배열을 시작합니다.
-
searchText에 바인딩된 입력 필드를 만듭니다. - 테이블에서
ng-repeat을 사용하여 제품을 반복합니다. -
filter필터를 사용하여searchText에 기반하여 검색합니다. -
orderBy를 사용하여 결과를 가격으로 정렬합니다. - 각 제품에 대해 이름을 대문자로 표시하고 가격을 화폐로 형식화합니다.
이 예제는 검색, 정렬, 형식화를 모두 동시에 수행합니다!
결론
축하합니다! 지금 당신은 AngularJS 필터의 세상으로 첫 걸음을 내디디셨습니다. 필터는 데이터의 개인 스타일리스트처럼, 정보를 가장 적절하고 매력적인 방식으로 표시하는 데 도움을 줍니다.
AngularJS를 계속 탐험하면서, 필터를 사용할 수 있는 더 많은 방법을 발견할 것입니다. 연습을 계속하고, 호기심을 유지하며, 가장 중요한 것은 즐겁게 코딩하세요! 얼마 지나지 않아, 당신은 모두를 놀라게 할 만한 놀라운 웹 애플리케이션을 만들 것입니다.
미래의 AngularJS 마스터, 즐거운 코딩을 기원합니다! ?
| 필터 | 목적 | 문법 |
|---|---|---|
| uppercase | 문자열을 대문자로 변환 | {{ expression |
| lowercase | 문자열을 소문자로 변환 | {{ expression |
| currency | 숫자를 화폐로 형식화 | {{ expression |
| filter | 배열에서 하위 항목을 선택 | {{ array |
| orderBy | 배열을 표현식에 따라 정렬 | {{ array |
Credits: Image by storyset