사용자 정의 필터
AngularJS의 필터를 정의하여 입력값을 필터링 하거나 다른 형태로 변환할 수 있다.
다음의 소스코드를 보고 확인해 보자.
소스코드
<body ng-app="myApp" ng-controller="myCtrl">
<div class="box-class">
<h2>Input 필터</h2>
<input type="text" ng-model="search">
<p ng-bind="search | numberWithCommas"></p>
<p>
<span ng-bind="search | checkmark"></span>
<span ng-bind="'' | checkmark"></span>
</p>
</div>
<div class="box-class">
<h2>리피터 필터(checknumber 적용)</h2>
<table border="1">
<tr ng-repeat="player in players | checknumber">
<td>{{player}}</td>
<td>{{player.name}}</td>
<td>{{player.number}}</td>
</tr>
</table>
</div>
<div class="box-class">
<h2>리피터 필터 종합(checknumber, search 적용)</h2>
<table border="1">
<tr ng-repeat="player in players | checknumber | filter: search">
<td>{{player}}</td>
<td>{{player.name}}</td>
<td>{{player.number}}</td>
</tr>
</table>
</div>
<div class="box-class">
<h2>리피터 필터 종합(checksearch 적용)</h2>
<table border="1">
<tr ng-repeat="player in players | filter: checksearch">
<td>{{player}}</td>
<td>{{player.name}}</td>
<td>{{player.number}}</td>
</tr>
</table>
</div>
<script>
var application = angular.module('myApp', []);
application.controller('myCtrl', function($scope) {
$scope.search = "1";
$scope.players = [ { name: 'beckham', number: 7 },
{ name: 'ronaldo', number: 9 },
{ name: 'hazard', number: 10 } ];
// number의 값이 search 의 값보다 클 경우에만 출력
$scope.checksearch = function(item) {
return item.number > $scope.search;
};
});
// 값이 있으면 체크, 없으면 X 표시
application.filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
// 입력된 숫자에 콤마와 원화기호를 추가하여 전달
application.filter('numberWithCommas', function() {
return function(item, userAccessLevel) {
return '\u20A9' + item.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
});
// 리피터 필터링
// 아이템의 number 값이 7보다 크면 출력
application.filter('checknumber', function() {
return function(items, userAccessLevel) {
var filtered = [];
angular.forEach(items, function(item) {
if (item.number > 7) {
filtered.push(item);
}
});
return filtered;
};
});
</script>
</body>
예제
Input 필터
리피터 필터(checknumber 적용)
| {{player}} | {{player.name}} | {{player.number}} |
리피터 필터 종합(checknumber, search 적용)
| {{player}} | {{player.name}} | {{player.number}} |
리피터 필터 종합(checksearch 적용)
| {{player}} | {{player.name}} | {{player.number}} |
반응형
'프레임워크 > [JS] angularjs' 카테고리의 다른 글
| [Angular JS] 한글 입력시 바인딩 오류 수정하기 (2) | 2015.07.13 |
|---|