AngularJS 필터 사용에 대한 자세한 설명_AngularJS

AnularJS 필터는 사용자에게 표시해야 하는 데이터의 형식을 지정하는 데 사용됩니다. 실용적인 내장 필터가 많이 있으며 직접 작성할 수도 있습니다.

HTML의 템플릿 바인딩 기호 {{ }} 내의 | 기호를 통해 필터를 호출합니다. 예를 들어
문자열을 변환하고 싶다고 가정해 보겠습니다. 대문자로 변환하려면 문자열의 각 문자를 개별적으로 변환하거나 필터를 사용할 수 있습니다.

{{ 이름 | 대문자 }}
자바스크립트 코드에서 $filter를 통해 필터를 호출할 수 있습니다. 예를 들어 JavaScript 코드에서 소문자
를 사용하는 경우 필터:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

HTML 형식의 필터를 사용할 때 매개변수를 필터에 전달해야 하는 경우 필터 이름 뒤에 콜론을 추가하면 됩니다
그게 다야. 매개변수가 여러 개인 경우 각 매개변수 뒤에 콜론을 추가할 수 있습니다. 예를 들어 숫자 필터는 소수 자릿수를 제한할 수 있습니다
자릿수는 다음과 같습니다. 필터 뒤에 2를 입력하면 필터에 매개변수로 2를 전달할 수 있습니다.

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

1. 화폐
통화 필터는 숫자 값을 통화 형식으로 지정할 수 있습니다. 123을 변환하려면 {{ 123 | 통화 }}를 사용하세요
통화 형식으로.
통화 필터를 사용하면 통화 기호를 직접 설정할 수 있습니다. 기본적으로 클라이언트 지역의 통화 기호가 사용됩니다.
그러나 통화 기호를 사용자 정의할 수도 있습니다.
2. 데이트
날짜 필터는 날짜를 필요한 형식으로 지정할 수 있습니다. AngularJS에는 여러 가지 날짜 형식이 내장되어 있습니다. 그렇지 않은 경우
사용할 형식을 지정합니다. MediumDate 형식이 기본적으로 사용됩니다. 이 형식은 아래 예에 표시됩니다.
다음은 기본적으로 지원되는 현지화된 날짜 형식입니다.

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

연도 형식
4자리 연도: {{ 오늘 | 날짜:'yyyy' }}
두 자리 연도: {{ 오늘 | 날짜:'yy' }}
연도: {{ 오늘 | 날짜:'y' }}
월 형식
영어 월: {{ 오늘 | 날짜:'MMMM' }}
영어 월 약어: {{ today | date:'MMM' }}
숫자 월: {{ 오늘 |날짜:'MM' }}
월: {{ 오늘 |날짜:'M' }}
날짜 형식
숫자 날짜: {{ 오늘|날짜:'dd' }}
해당 월의 날짜: {{ 오늘 | 날짜:'d' }}
영어 요일: {{ 오늘 | 날짜:'EEEE' }}
영어 주 약어: {{ today | date:'EEE' }}
시간 형식
24시간 디지털 시간: {{오늘|날짜:'HH'}}
시간: {{오늘|날짜:'H'}}
12시간 디지털 시간: {{오늘|날짜:'hh'}}
오전 또는 오후 시간: {{오늘|날짜:'h'}}
분 형식
분 단위: {{ 오늘 | 날짜:'mm' }}
분: {{ 오늘 | 날짜:'m' }}
초 형식
숫자 초: {{ 오늘 | 날짜:'ss' }}
초 단위: {{ 오늘 | 날짜:'s' }}
밀리초 수: {{ 오늘 | 날짜:'.sss' }}
다음은 사용자 정의 날짜 형식의 몇 가지 예입니다.

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

필터

filter 필터는 주어진 배열에서 하위 집합을 선택하고 새 배열을 생성하여 반환할 수 있습니다.

예를 들어 문자 e가 포함된 모든 단어를 선택하려면 다음 필터를 사용하세요.

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

개체를 필터링하려면 위에서 언급한 개체 필터를 사용하면 됩니다. 예를 들어 사람 객체로 구성된
이 있다고 가정해 보겠습니다. 배열, 각 개체에는 다음 형식으로 필터링할 수 있는 좋아하는 음식 목록이 포함되어 있습니다.

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

필터링을 위해 사용자 정의 함수를 사용할 수도 있습니다(이 예에서는 함수가 $scope에 정의됨).

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

isCapitalized 함수의 기능은 아래와 같이 첫 글자가 대문자인지 여부에 따라 true 또는 false를 반환하는 것입니다.

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

맞춤 필터

먼저, 애플리케이션에서 참조할 모듈을 만듭니다

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

이제 문장의 첫 글자를 대문자로 변환하려면 필터를 사용하여 문장 전체를 먼저 대문자로 변환하면 됩니다
쓴 다음 첫 글자를 대문자로 변환하세요.

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

위 내용은 AngularJS 필터를 사용하는 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.