AngularJS 필터 및 예제가 포함된 AngularJS 사용자 정의 필터
제임스 하트만
⚡ 스마트 요약
AngularJS의 필터는 기본 데이터를 변경하지 않고 표현식의 값을 표시 형식에 맞게 변환합니다. 내장 필터는 대소문자, 숫자, 통화 및 JSON 형식을 지원하며, 사용자 지정 필터는 프레임워크에서 제공하지 않는 모든 형식 지정 규칙을 처리할 수 있습니다.
AngularJS의 필터란 무엇입니까?
A AngularJS에서 필터링 필터는 원본 값을 변경하지 않고 사용자에게 표시할 표현식 값의 형식을 지정하는 데 도움이 됩니다. 예를 들어 문자열을 소문자 또는 대문자로 표시하려면 필터를 사용할 수 있습니다. '소문자' 및 '대문자'와 같은 내장 필터는 요청된 대소문자로 문자열을 반환하며, 숫자, 통화 및 JSON에 대한 추가 필터도 있습니다.
⚠️ 버전 참고: AngularJS(1.x 버전)는 2021년 12월 31일부로 지원이 종료되었으며 더 이상 보안 패치가 제공되지 않습니다. 아래 내용은 기존 AngularJS 애플리케이션 유지 관리에 여전히 유효합니다. 최신 Angular에서는 동일한 역할을 파이프(pipe)가 수행합니다.
필터는 파이프(|) 문자를 사용하여 뷰에 적용됩니다. 각 필터를 살펴보기 전에, 왜 사용자 지정 필터를 작성해야 하는지 아는 것이 도움이 됩니다.
AngularJS의 소문자 필터
이 필터는 문자열을 입력받아 모든 문자를 소문자로 표시합니다.
아래 예시에서 컨트롤러는 스코프 객체를 통해 문자열을 뷰로 전달하고, 필터는 이를 소문자로 변환합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code 설명
- 대소문자가 혼합된 문자열 "Angular JS"가 멤버 변수에 저장됩니다.
tutorialName스코프 객체에 대해. - 필터 기호(|)는 변환할 출력을 나타냅니다.
lowercase`keyword`는 내장 필터를 적용하여 전체 문자열을 소문자로 변환합니다.
⚠️ 모든 상품 목록에 수정 사항이 적용되었습니다. 원래의 여섯 가지 샘플 모두 세 가지 결함을 공유했습니다. chrset="UTF 8" 유효한 속성이나 인코딩이 아니며, 현재는 다음과 같습니다. charset="UTF-8". angular-route.js 로드 전에 angular.min.js해당 코드는 모듈 오류를 발생시켰고, 실제로 사용된 적이 없었으므로 제거되었습니다. 사용되지 않는 jQuery 참조도 함께 제거되었습니다. 또한 텍스트에는 값이 "AngularJS"라고 표시되어 있었지만 코드는 "Angular JS"로 설정했습니다. 이제 텍스트와 코드가 일치합니다.
출력:
대소문자가 혼합된 문자열은 모두 소문자로 변환됩니다. 반대의 경우도 마찬가지입니다.
AngularJS의 대문자 필터
이 필터는 소문자 필터의 반대 기능으로, 모든 문자를 대문자로 표시합니다.
아래 예시에서 컨트롤러는 스코프 객체를 통해 뷰로 문자열을 전달하고, 필터는 이를 대문자로 변환합니다.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code 설명
- 대소문자가 혼합된 문자열 "Angular JS"가 여기에 배치됩니다.
tutorialName그리고 스코프 객체에 연결됩니다. - 필터 기호(|) 다음에는 다음이 옵니다.
uppercase키워드이기 때문에 내장 필터는 전체 문자열을 대문자로 표시합니다.
⚠️ 보정: 원래 설명에서는 이 부분을 "소문자 옵션을 포함한 AngularJS 대문자 변환 필터의 예시"라고 소개했는데, 이는 두 가지 모두 잘못된 설명입니다. 이 부분은 대문자 변환 필터를 보여주는 것이며, AngularJS에는 대문자 변환 필터 자체가 없습니다. 첫 글자만 대문자로 바꾸려면 사용자 지정 필터를 만들어야 하는데, 뒷부분에서 그 방법을 설명합니다.
출력:
케이스 필터는 인수를 받지 않습니다. 다음 필터는 콜론을 사용하여 필터에 매개변수를 전달하는 방법을 보여줍니다.
AngularJS의 숫자 필터
이 필터는 숫자의 형식을 지정하고 표시되는 소수점 자릿수를 제한할 수 있습니다.
아래 예시는 숫자 필터를 사용하여 소수점 이하 두 자리까지만 표시되는 값을 나타냅니다. 컨트롤러는 스코프 객체를 통해 뷰로 숫자를 전달하고, 뷰에서 필터가 적용됩니다.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code 설명
- 소수점 이하 자릿수가 많은 숫자가 멤버 변수에 저장됩니다.
tutorialID그리고 스코프 객체에 연결됩니다. - 필터 기호(|) 다음에는 다음이 있습니다.
number:2콜론은 인수를 전달하고, 숫자 2는 소수점 둘째 자리까지 설정합니다. 값은 표시를 위해 반올림되므로 3.565656은 3.57로 표시되지만, 실제 사용 시에는 정수가 그대로 유지됩니다.
출력:
다음 필터에서 다루는 것처럼, 단순히 숫자를 형식화하는 것만으로는 금액이 나타내는 값에 대해 충분한 해결책이 되지 못하는 경우가 많습니다.
AngularJS의 통화 필터
이 필터는 숫자를 통화 값으로 변환하여 앞에 '$'와 같은 통화 기호를 붙입니다.
아래 예시에서 컨트롤러는 스코프 객체를 통해 뷰로 숫자를 전달하고, 뷰에서는 통화 필터가 적용됩니다.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code 설명
- 숫자가 멤버 변수에 저장됩니다.
tutorialprice그리고 스코프 객체에 연결됩니다. - 필터 기호(|) 다음에는 다음이 옵니다.
currency필터.
⚠️ 보정: 원래 문서에서는 통화 기호가 "기기에 적용된 언어 설정에 따라 달라진다"고 주장했지만, 그렇지 않습니다. AngularJS는 라이브러리에 포함된 로케일(기본값은 en-US)을 사용하므로 운영 체제와 관계없이 기호는 $입니다. 해당되는 파일을 로드하세요. angular-locale_*.js 파일을 생성하거나 기호를 직접 전달하세요. {{tutorialprice | currency:"£"}}.
출력:
문자열과 숫자는 단순한 값입니다. 마지막 내장 필터는 전체 객체를 처리합니다.
AngularJS의 JSON 필터
이 필터는 객체를 특정 형식으로 변환합니다. JSON 개발 중에 범위 데이터를 검사하는 데 유용한 문자열입니다.
아래 예시에서 컨트롤러는 스코프 객체를 통해 뷰로 객체를 전송하고, 뷰에서는 JSON 필터가 적용됩니다.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code 설명
- 물체를 잡고 있는
TutorialID: 12tutorialName: "Angular"멤버 변수에 저장됩니다.tutorial그리고 스코프 객체에 연결됩니다. - 필터 기호(|) 다음에는 다음이 옵니다.
json객체를 들여쓰기된 JSON 텍스트로 직렬화하는 필터입니다.
⚠️ 보정: 원문에서는 이 값을 "숫자"이자 "JSON 형식 문자열"이라고 설명했지만, 둘 다 아닙니다. 이것은 Java스크립트 객체와, 이를 표시용 JSON 문자열로 변환하는 것이 JSON 필터입니다.
출력:
이 다섯 가지 필터는 일반적인 경우를 모두 다룹니다. 만약 이 필터들 중 어느 것도 원하는 결과를 내놓지 못한다면, 직접 필터를 작성해야 합니다.
AngularJS 사용자 정의 필터
AngularJS의 내장 필터가 원하는 출력 형식을 충족하지 못하는 경우가 있습니다. 이러한 경우, 원하는 형식으로 출력을 반환하는 AngularJS 사용자 지정 필터를 만들 수 있습니다.
사용자 정의 필터는 모듈에 등록되면 내장 필터와 똑같이 동작합니다. 아래 섹션에서는 사용자 정의 필터도 동일한 파이프 구문을 사용하므로 먼저 표준 필터에 대해 설명한 다음 사용자 정의 필터를 만드는 방법을 보여줍니다.
AngularJS에서 사용자 정의 필터를 만드는 방법
아래 예시에서는 문자열이 전달됩니다. 제어 장치 스코프 객체를 통해 뷰에 표시되지만, 그대로 표시되어서는 안 됩니다. 사용자 지정 필터는 다음과 같습니다. AngularJS와 문자열을 하나 더 추가하고 완성된 결과를 표시합니다.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code 설명
- "Angular"라는 문자열이 멤버 변수에 저장됩니다.
tutorial그리고 스코프 객체에 연결됩니다. - AngularJS는 다음을 제공합니다.
filter사용자 지정 필터를 생성하는 데 사용되는 등록 메서드입니다. 'Demofilter'는 해당 필터에 지정된 이름이며, 뷰는 이 이름을 참조합니다. - 이것이 사용자 정의 필터의 표준 형태입니다. 등록된 함수는 다음과 같습니다. 공장 작업을 수행하는 함수를 반환합니다. 이 함수는 필터링할 값을 첫 번째 매개변수로 받아 결과를 반환합니다. 여기서는 입력값에 "Tutorial"이 추가된 결과입니다.
- 필터는 내장 필터와 동일한 파이프 구문을 사용하여 뷰에 적용됩니다.
💡 Tip 필터 이름은 관례적으로 소문자 또는 카멜케이스로 작성됩니다. 'Demofilter'도 괜찮지만, 'Demofilter'와 같은 이름은 적절하지 않습니다. appendTutorial 가독성이 좋고 기존 이름과 충돌하지 않습니다.
출력:
전달된 문자열에 '튜토리얼'이라는 단어가 추가되었습니다. tutorial 변수입니다. 이 필터는 항상 동일한 텍스트를 추가하며, 다음 섹션에서 이를 구성할 수 있습니다.
사용자 지정 필터에 인수를 전달하는 방법
위의 필터는 추가할 텍스트를 하드코딩하므로 한 가지 작업만 수행할 수 있습니다. 내장 필터는 다음과 같습니다. number:2 콜론 뒤에 인수를 허용하며, 사용자 지정 필터도 마찬가지입니다. 첫 번째 콜론 이후의 모든 매개변수는 뷰에서 콜론으로 구분된 인수에 매핑됩니다.
세 단계가 포함됩니다: 매개변수 추가 후 input 반환되는 함수에서 선택 사항인 모든 인수에 대해 기본값을 제공하여 인수가 생략되더라도 필터가 계속 작동하도록 한 다음, 뷰에 있는 인수들을 콜론으로 구분하여 전달합니다.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
그러면 보기는 다음과 같이 읽히며, 여기서 "튜토리얼"은 다음과 같이 됩니다. suffix 그리고 하이픈은 다음과 같이 됩니다. separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
두 가지 중요한 사항을 놓치기 쉽습니다. 인수는 AngularJS 표현식이므로 리터럴 문자열은 따옴표로 묶어야 하며, 따옴표 없이 입력된 단어는 스코프 속성으로 인식됩니다. 필터는 또한 체인 방식으로 작동하며, 각 필터는 이전 필터의 출력을 받습니다. {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ 경고: 필터는 순수하게 유지해야 합니다. 즉, 동일한 입력에 대해 동일한 출력을 생성하고 외부 변경을 허용하지 않아야 합니다. AngularJS는 순수 필터를 캐시하고 입력이 변경될 때만 다시 실행합니다. 시계를 읽거나 서비스를 변경하는 필터는 반드시 표시해야 합니다. $stateful이는 캐싱을 비활성화하고 다이제스트 주기마다 필터를 실행하여 페이지 로딩 속도 저하의 일반적인 원인을 제거합니다.
필터는 템플릿에만 국한되지 않습니다. 동일한 필터를 다양한 곳에서 호출할 수 있습니다. Java다음은 스크립트입니다.
컨트롤러에서 `$filter` 서비스를 사용하여 필터를 사용하는 방법
뷰에서 필터를 적용하는 것이 일반적이지만, 변환된 값이 컨트롤러 내부, 예를 들어 서버로 데이터를 전송하기 전에 필요한 경우도 있습니다. AngularJS는 등록된 모든 필터(내장 필터와 사용자 정의 필터 모두)를 통해 노출합니다. $filter 서비스를 주입하고, 필터 이름을 사용하여 필터 함수를 가져온 다음, 해당 함수를 값과 인수를 사용하여 호출합니다.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
더 짧은 형식도 있습니다. 필터 이름 뒤에 다음을 삽입하는 것입니다. Filter같은 uppercaseFilter이 코드는 필터 기능을 직접 제공하며 즉시 호출할 수 있습니다. 두 형식 모두 동일한 기능을 수행하므로 어떤 형식을 사용할지는 스타일적인 차이입니다.
두 가지 용도가 반복적으로 나타납니다. 첫 번째는 페이로드를 준비하는 것입니다. 일반적으로 날짜는 정해진 패턴에 따라 API에 전달되어야 합니다. $filter('date')(value, 'yyyy-MM-dd') 첫 번째는 폼에 바인딩된 값을 건드리지 않고 생성하는 것이고, 두 번째는 컨트롤러에서 한 번만 컬렉션의 범위를 좁히는 것입니다. orderBy 을 확인하십시오. ng-반복 모든 다이제스트에서 다시 실행되는 표현식입니다.
이런 방식으로 주입된 필터는 여전히 모듈에 등록되므로 사용자 지정 필터를 선언해야 합니다. app.filter 컨트롤러가 묻기 전에 $filter 그렇게 하세요. 그렇지 않으면 AngularJS에서 알 수 없는 공급자 오류가 발생합니다.
필터를 호출하는 방법 Java스크립트는 템플릿과 한 가지 중요한 차이점이 있습니다. 스크립트는 결과를 한 번만 계산하여 스코프에 저장하는 반면, 템플릿은 매번 다이제스트마다 결과를 다시 계산합니다. 따라서 값이 거의 변하지 않는 경우에는 스크립트가 더 빠른 옵션이지만, 값이 자주 변해야 하는 경우에는 적합하지 않습니다. track 사용자 입력.
