AngularJS 필터
AngularJS에 필터를 추가하여 데이터 형식을 지정할 수 있습니다.
AngularJS 필터
AngularJS는 데이터를 변환하는 필터를 제공합니다.
currency숫자를 통화 형식으로 지정합니다.date날짜를 지정된 형식으로 지정합니다.filter배열에서 항목의 하위 집합을 선택합니다.json개체를 JSON 문자열로 형식화합니다.limitTo배열/문자열을 지정된 수의 요소/문자로 제한합니다.lowercase문자열을 소문자로 포맷합니다.number숫자를 문자열로 포맷합니다.orderBy표현식으로 배열을 정렬합니다.uppercase문자열을 대문자로 포맷합니다.
표현식에 필터 추가
필터는 파이프 문자 다음에 필터를 사용하여 표현식에 추가할 수 있습니다 |.
uppercase필터 형식 문자열을 대문자로 :
예시
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
lowercase필터 형식 문자열을 소문자로 :
예시
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
지시문에 필터 추가
ng-repeat필터는 파이프 문자
|다음에 필터 를 사용하여 , 같은 지시문에 추가됩니다 .
예시
필터 는 orderBy배열을 정렬합니다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
통화 필터
currency필터는 숫자를 통화 형식으로 지정합니다 .
예시
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
AngularJS 통화 필터 참조 에서 통화 필터에 대해 자세히 알아보십시오.
필터 필터
filter필터는 배열의 하위 집합을 선택합니다 .
필터 는 filter배열에만 사용할 수 있으며 일치하는 항목만 포함하는 배열을 반환합니다.
예시
문자 "i"가 포함된 이름을 반환합니다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
AngularJS 필터 필터 참조 에서 필터 필터에 대해 자세히 알아보십시오.
사용자 입력을 기반으로 배열 필터링
입력 필드에 지시문을 설정하면 ng-model입력 필드의 값을 필터의 표현식으로 사용할 수 있습니다.
입력 필드에 문자를 입력하면 일치 항목에 따라 목록이 축소/성장합니다.
- 자니
- 칼
- 마가렛
- 헤게
- 조
- 구스타프
- 비르기트
- 메리
- 카이
예시
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
사용자 입력을 기반으로 배열 정렬
정렬 순서를 변경하려면 테이블 헤더를 클릭하십시오.
| 이름 | 국가 |
|---|---|
| 자니 | 노르웨이 |
| 칼 | 스웨덴 |
| 마가렛 | 영국 |
| 헤게 | 노르웨이 |
| 조 | 덴마크 |
| 구스타프 | 스웨덴 |
| 비르기트 | 덴마크 |
| 메리 | 영국 |
| 카이 | 노르웨이 |
테이블 헤더에 지시문을 추가하여 ng-click배열의 정렬 순서를 변경하는 함수를 실행할 수 있습니다.
예시
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
사용자 정의 필터
모듈에 새 필터 팩토리 함수를 등록하여 자신만의 필터를 만들 수 있습니다.
예시
"myFormat"이라는 사용자 지정 필터를 만듭니다.
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
필터 는 myFormat다른 모든 문자를 대문자로 포맷합니다.