오늘은 몰랐으면 내일은 알면 된다
[Angular] AngularJS 튜토리얼 9. 필터(Filters) 본문
[ AngularJS 필터 ]
: 데이터 변형을 위해서 사용된다.
| currency | number 를 통화(currency) 형식으로 바꾼다. |
| date | date 를 특정한 형식으로 바꾼다. |
| filter | array 의 부분집합을 선택한다. (조건에 따른 데이터 선택) |
| json | 객체를 JSON String 으로 바꾼다. |
| limitTo | array 또는 String 을 특정 인덱스까지만 제한해서 표시한다. |
| lowercase | String을 lower case로 바꾼다. |
| number | number를 string으로 바꾼다. |
| orderby | 배열을 식(expression)에 따라 정렬한다. |
| uppercase | String을 upper case로 바꾼다. |
[ 식(Expression)에 필터를 추가하기 ]
: 필터는 파이프 문자 ( | ) 를 사용해서 추가할 수 있다.
- uppercase
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{lastName | uppercase}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.lastName = 'park';
});
</script>
- lowercase
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{lastName | lowercase}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.lastName = 'KIM';
});
</script>
[ 디렉티브에 필터를 추가하기 ]
: 식과 동일한 방법으로, 파이프 문자( | )를 이용해 추가할 수 있다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy: 'country'">
{{x.name + ' : ' + x.country}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
$scope.names = [
{name : 'NYK', country : 'Korea'},
{name : 'JSP', country : 'Japan'},
{name : 'HWJ', country : 'USA'}
];
});
</script>
[ currency 필터 ]
: number를 통화 형식으로 바꾼다. 기본값은 달러인 모양이다. (locale 값)
locale은 ko_KR인데 왜 달러가 나오는지는 모르겠다. locale을 읽어오는 곳이 다른가?
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price : {{price | currency}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 240000;
});
</script>
- 사용방법
{{ number | currency : symbol : fractionsize }}
| symbol | 통화기호를 표시하는 곳이며 옵션사항이다. 기호는 텍스트나 문자가 될 수 있다. ('NOK', '₩' 등) |
| fractionsize | 소수점 표기 관련 옵션사항이다. |
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price : {{price | currency : '₩' : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 240000;
});
</script>
[ filter 필터 ]
: 배열의 부분집합을 선택한다.
배열에만 사용가능하며, 조건에 맞는 요소를 포함한 배열을 반환한다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
$scope.names = [
'nyk',
'lky',
'isj',
'ddd',
'igdg',
'dddi'
];
});
</script>
- 사용방법
{{ arrayexpression | filter : expression : comparator }}
| expression | 배열 요소를 선택할때 사용되는 식이다. - String : 배열 요소 중 string과 일치하는 값이 선택된다. - Object : 여기서 선택조건으로 사용되는 객체는 일종의 패턴이다. 예를들어 filter: {"name" : "H", "city" : "London"} 이라고 한 경우, name라는 key 값의 value 중 H를 가진 값, city라는 key 값의 value 중 London을 가진 값을 찾는다. - function : 각각의 배열 요소에 대해 호출되며, function 의 결과로 true를 반환하는 값만 선택된다. |
| comparator | 옵션사항이다. 비교가 얼마나 엄격하게 이루어져야 하는지에 대한 설정값이다. - true : 비교값과 정확히 일치하는 값만 선택한다. - false : 비교값을 포함하는 값을 선택한다. 기본값이다. - function : 맞다고 할지 아니라고 할지에 대한 내용을 정의할 수 있다. |
예제는 W3School의 값을 그대로 사용하였다.
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in customers | filter : {'name' : 'O', 'city' : 'London'}">
{{x.name + ' : ' + x.city}}
</li>
</ul>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.customers = [
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
];
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in customers | filter : 'London' : true">
{{x.name + ' : ' + x.city}}
</li>
</ul>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in customers | filter : 'Lon' : true">
{{x.name + ' : ' + x.city}}
</li>
</ul>
</div>
expression만 있는 경우에는 모든 key 값의 value 중 일치하는 것을 선택하는 모양이다.
[ limitTo 필터 ]
: 배열 혹은 문자열을 특정 개수, 혹은 인덱스까지만 반환한다. 한글로 정확히 뭐라고 하는게 옳은 표현일지 모르겠어서 원문을 남긴다.(returns an array or a string containing only a specified number of elements)
대체로 substr과 개념이 같다고 보면 되겠다.
배열에 사용되는 경우, 특정 인덱스까지만 포함된 배열을 반환한다.String에 사용되는 경우, 특정 인덱스까지만 포함된 String을 반환한다.number에 사용되는 경우, 특정 자리수까지만 포함된 number를 반환한다.
말로 해놓으면 뭐야? 싶은데 예시를 보는 게 낫다.
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
- 사용방법
{{ object | limitTo : limit : begin }}
| limit | number, 몇개까지 반환할 것인지에 대한 값이다. |
| begin | 기본값은 0이며, limit이 어디서부터 시작될 것인지에 대한 값이다. |
- 배열인 경우
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | limitTo : -3">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | limitTo : 3 : 1">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
String인 경우
<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.txt = "Hello, welcome to piteh tistory";
});
</script>
number인 경우
<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{phone| limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.phone = "123456789";
});
</script>
이때 phone 이 123456789이든 "123456789"이든 filter 결과는 동일하다.
[ 사용자 입력값에 따른 배열값 filter ]
: input 필드에 ng-model 디렉티브를 지정하여 input 필드의 값을 식으로 사용할 수 있다.
양방향 바인딩이기 때문에 한자한자 입력할때마다 filter가 적용될것이다.
<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>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
[ 사용자 입력값에 따른 배열값 정렬 ]
: ng-click 디렉티브를 추가하여 function을 실행시키고, 배열을 정렬하는 다음의 예시를 보자.
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="50%">
<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>
var app = angular.module('myApp', []);
app.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) {
return $scope.myOrderBy = x;
}
});
</script>
[ 커스텀 필터 ]
: 모듈 내에서 filter factory 함수를 이용해서 커스텀 필터를 만들 수 있다.
예를들어 이름의 스펠링 중 짝수번째를 대문자로 바꾸는 필터는 다음과 같이 만들 수 있다.
<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>
'Front > Angular' 카테고리의 다른 글
| [Angular] AngularJS 튜토리얼 11. AJAX - $http (0) | 2021.03.11 |
|---|---|
| [Angular] AngularJS 튜토리얼 10. 서비스(Services) (0) | 2021.03.11 |
| [Angular] AngularJS 튜토리얼 8. 스코프(Scope) (0) | 2021.03.10 |
| [Angular] AngularJS 튜토리얼 7. 컨트롤러(Controllers) (0) | 2021.03.10 |
| [Angular] AngularJS 튜토리얼 6. 데이터 바인딩(Data Binding) (0) | 2021.03.10 |
'Front/Angular' Related Articles
more
