필터는 데이터를 표시할 때 데이터를 보여주는 형식을 설정하는 컴포넌트다. 필터를 적용해서 대소문자가 섞여있는 문자열을 전부 소문자로 표시할 수도 있고 숫자 데이터에 자릿수 구분자를 추가하거나 표시 소숫점 자릿수를 제한하는 등 표시형식을 쉽게 결정할 수 있다.
사용법은 위 코드에서 보듯이 데이터 바인딩 대상 뒤에 파이프와 사용할 필터를 적어주면 된다. 필터 중에는 별도의 인자를 받는것들도 있다. 필터에 인자를 전달하기 위해서는 콜론을 사용한다.
<!DOCTYPE html>
<html>
<head>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("MyFilterDemoCtrl", function ($scope) {
var someData = {
firstName: 'awefASEWRGESRgawraswfawERGF',
};
$scope.data = someData;
});
</script>
</head>
<body ng-app="myapp" ng-controller="MyFilterDemoCtrl">
<p>
<!-- Unfiltered data -->
<strong>First Name</strong>: {{data.firstName}}<br/>
<strong>Surname:</strong> {{data.surname}}
</p>
<p>
<!-- Filtered data -->
<strong>First Name</strong>: {{data.firstName | lowercase}}<br/>
<strong>Surname:</strong>{{data.surname | lowercase }}
</p>
</body>
</html>
위 코드를 실행해 보면 "lowercase" 필터가 적용되지 않은 firstName은 데이터 그대로 출력되는 반면 필터가 적용된 데이터는 모두 소문자로 바뀐것을 확인할 수 있다. 물론 이런 처리는 컨트롤러에서 scope에 데이터를 바인딩 하기 전에 처리할 수도 있지만 데이터를 표시하는 코드는 뷰에 두는 것이 좋다는 것을 생각해 보면 필터로 처리하는것이 좀 더 좋아 보인다. Marionette같은 경우는 뷰를 처리하는 스크립트 객체가 따로 존재해서 거기에 화면 표시에 관련된 코드를 작성했지만 Angularjs는 그와같은 객체가 따로 존재하지 않는다.사용법은 위 코드에서 보듯이 데이터 바인딩 대상 뒤에 파이프와 사용할 필터를 적어주면 된다. 필터 중에는 별도의 인자를 받는것들도 있다. 필터에 인자를 전달하기 위해서는 콜론을 사용한다.
{{ "12345" | currency : "\\" : 3}}
위 코드는 내장 필터인 currency 필터를 적용한 코드이다. 콜론 이후에 추가 인자를 전달하는 것을 확인할 수 있다.
빌드인 필터에 적합한 기능을 가지는 필터가 없으면 직접 만들어 사용할 수 있다. 필터를 만들때는 module객체의 filter 메서드를 사용한다. 아래는 필터 작성 예시 코드이다.
angular.module("myapp", []).filter("removeHyphen", function(){
return function(txt, arg1, arg2, ...) {
return txt.replace(/-/g, "");
}
});
작성한 필터는 문자열에서 하이픈을 모두 제거하는 코드다. filter 메서드의 첫번째 인자는 필터의 이름이고 두번째 함수는 실제 실행될 함수를 리턴하는 함수를 제공해야된다. 이 함수에 의해 반환되는 함수의 인자는 첫번째는 필터 적용의 대상이 될 문자열이고 두번째 부터는 필터에 추가적으로 제공될 인자값이 순서대로 들어온다.
댓글 없음:
댓글 쓰기