English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
필터(filter)는 그 이름처럼 입력을 받아 특정 규칙을 통해 처리한 후 처리된 결과를 반환하는 역할을 합니다. 주로 데이터의 포맷화에 사용되며, 예를 들어 배열의 부분 집합을 가져오거나 배열의 요소를 정렬하는 등 사용됩니다. ng는 몇 가지 필터를 내장하고 있습니다: currency(화폐), date(날짜), filter(문자열 일치), json(JSON 객체 포맷화), limitTo(개수 제한), lowercase(소문자), uppercase(대문자), number(숫자), orderBy(정렬). 총 9가지입니다. 이 외에도 사용자 정의 필터를 정의할 수 있으며, 이는 데이터 처리에 대한 모든 요구를 충족시킬 수 있습니다.
필터의 내용은 매우 간단합니다. 내장 필터의 사용법을 이해하고, 자신이 필터를 정의하는 방법을 알면 충분합니다. 오늘은 체계적으로 학습하였습니다. 아래에 소개합니다.
filter의 두 가지 사용 방법
1. 템플릿에서 필터 사용
filter를 사용할 수 있는 방법은 {{}} 내에서 직접 사용하고, 표현식 뒤에 |로 구분하여 문법을 다음과 같이 사용합니다:
{{ 표현식 | 필터 }}
여러 필터를 연달아 사용할 수도 있으며, 이전 필터의 출력은 다음 필터의 입력으로 사용됩니다. (이거가 파이프와 똑같은 모양인 이유가 무엇인가요...)
{{ 표현식 | 필터1 | filter2 | ... }}
filter는 매개변수를 받을 수 있으며, 매개변수는 :로 구분됩니다. 예를 들어：
{{ expression | filter:argument1:argument2:... }}
{{}} 내의 데이터를 포맷화하는 것 외에도, 지시에서 filter를 사용할 수 있습니다. 예를 들어, 배열 array를 먼저 필터 처리한 후에 루프를 사용하여 출력할 수 있습니다：
<span ng-repeat="a in array | filter ">
2. controller와 service에서 filter 사용
우리의 JavaScript 코드에서도 필터를 사용할 수 있습니다. 방법은 우리가 잘 알고 있는 의존성 주입입니다. 예를 들어, controller에서 currency 필터를 사용하려면 그 필터를 해당 controller에 주입하면 됩니다. 코드는 다음과 같습니다：
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}
템플릿에서 {{num}}를 사용하면 직접 $를 출력할 수 있습니다.123,534.00이 되었습니다! 서비스에서 filter를 사용하는 것도 마찬가지입니다.
이제 controller에서 여러 filter를 사용하려면 각각을 주입해야 하나요? 이렇게 하면 많이 귀찮을 것 같네요. 작은 형제, 괜찮아요~ ng는 필요한 filter를 호출할 수 있는 $filter 서비스를 제공합니다. 필요한 filter 하나만 주입하면 됩니다. 사용법은 다음과 같습니다：
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
같은 효과를 얻을 수 있습니다. 이점은 다양한 필터를 쉽게 사용할 수 있습니다.
ng 내장 필터
ng는 다양한 필터를 내장하고 있으며, 사용법은 매우 간단합니다. 문서를 보면 이해할 수 있습니다. 그러나 향후 문서를 찾지 않도록 하기 위해 여기서는 상세한 기록을 남기겠습니다.
1. currency (통화 처리)
currency를 사용하면 숫자를 통화로 포맷화할 수 있습니다. 기본적으로는 달러 기호가 사용되며, 필요에 따라 자신이 원하는 기호를 입력할 수 있습니다. 예를 들어, 저는 인민폐를 입력했습니다：
{{num | currency : '￥'}}
2. date (날짜 포맷화)
원생의 JavaScript는 날짜 포맷화 능력이 제한적이며, ng가 제공하는 date 필터는 일반 포맷화 요구를 충분히 만족시킬 수 있습니다. 사용법은 다음과 같습니다：
{{date | date : 'yyyy'}}-MM-dd hh:mm:ss EEEE}}}
파라미터는 원하는 형식을 지정합니다. y M d h m s E는 연, 월, 일, 시, 분, 초, 요일을 나타냅니다. 이를 자유롭게 조합할 수 있습니다. 또한, 특정 설명적인 문자열을 사용하여 자릿수를 제한할 수도 있습니다. 예를 들어, 'shortTime'은 시간을 다음과 같이 형식화합니다:12:05 pm와 같은. ng는 여덟 가지 설명적인 문자열을 제공하지만, 저는 이게 조금 많다고 생각합니다. 제가 원하는 형식을 자유롭게 조합할 수 있으며, 이 많은 단어를 기억할 필요가 없습니다.
3. filter(접두사 일치)
이름이 filter인 filter(이 이름이 참 혼란스럽습니다-!)은 배열을 처리하고, 특정 접두사를 포함한 요소를 필터링하여 서브 배열로 반환합니다. 문자열 배열이나 객체 배열을 사용할 수 있습니다. 객체 배열의 경우, 속성 값과 일치시킵니다. 접두사 일치 규칙을 정의하는 파라미터를 받습니다. 예를 들어, 몇몇 인기 있는 아이들을 사용하여 예제를 보여드리겠습니다:
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
$scope.func = function(e){return e.age}4;}
{{ childrenArray | filter : 'a'}} //속성 값에 포함된 a를 일치시킵니다
{{ childrenArray | filter : 4 }} //속성 값에 포함된4의
{{ childrenArray | filter : {name : 'i'}}} //파라미터는 객체이며, name 속성에 i가 포함된 것을 일치시킵니다
{{childrenArray | filter : func }} //파라미터는 함수이며, 반환된 age를 지정합니다4의
4. json(형식화된 JSON 객체)
JSON 필터는 JS 객체를 JSON 문자열로 변환할 수 있습니다. 매개변수가 없습니다. 이게 뭐 쓸만한 거죠? 저는 일반적으로 페이지에서 JSON 문자열을 출력하지 않습니다. 웹사이트에 따르면 디버깅에 사용할 수 있다고 합니다. 좋은 선택입니다. 또한, JS에서 사용할 수도 있습니다. JSON.stringify()와 같은 역할을 합니다. 사용법은 매우 간단합니다:
{{ jsonTest | json}}
5. limitTo(배열 길이 또는 문자열 길이 제한)
limitTo 필터는 배열이나 문자열을 자르기 위해 사용됩니다. 자르기 길이를 지정하는 매개변수를 받습니다. 매개변수가 음수이면 배열의 끝에서부터 자릅니다. 개인적으로 이 필터가 비효율적이라고 생각합니다. 먼저 배열이나 문자열의 시작 부분에서만 자를 수 있습니다./끝에서부터 자르기도 합니다. 그런 다음, js 원시 함수를 대체할 수 있습니다. 사용법을 보겠습니다:
{{ childrenArray | limitTo : 2 }} //첫 번째 두 항목만 표시됩니다
6. lowercase(소문자)
데이터를 모두 소문자로 변환합니다. 매우 간단합니다. 더 설명하지 않겠습니다. 매우 비효율적인 필터입니다. 매개변수가 없으며, 전체 문자열을 소문자로 변환할 수 있습니다. 문자를 지정할 수 없습니다. 사용법에 대해 설명할意愿이 없습니다.
7. uppercase(대문자)
위와 같습니다.
8. number(숫자 포맷)
number 필터는 숫자에 천자리 구분을 추가할 수 있습니다. 이렇게 합니다:123,456,789다시 말해, float 타입의 소수점 자리수를 지정할 수 있습니다:
{{ num | number : 2 }}
9. orderBy(정렬)
orderBy 필터는 배열의 요소를 정렬할 수 있습니다. 정렬 규칙을 지정하기 위해 매개변수를 받습니다. 매개변수는 문자열이 될 수 있으며, 해당 속성 이름에 따라 정렬할 수 있습니다. 또한 함수가 될 수 있으며, 정렬 속성을 정의할 수 있습니다. 또한 배열이 될 수 있으며, 배열의 속성 값에 따라 순차적으로 정렬할 수 있습니다. (첫 번째 항목 비교 값이 같으면 두 번째 항목 비교 값으로 이동합니다). 아래의 아이 어레이를 예로 들어보겠습니다:
<div>{{ childrenArray | orderBy : 'age' }}</div>/div> //age 속성 값에 따라 정렬합니다. 그런 경우-age는 역순으로
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //함수의 반환 값에 따라 정렬합니다
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //age가 같으면 name순으로 정렬합니다
내부 필터를 소개했습니다. 쓰는 내가 잠이 들어가려 했습니다... 정말로 보신 것처럼, ng 내부 필터는 완벽하지 않습니다. 사실 많은 것이 비효율적입니다. 더 개인화된 요구 사항은 우리가 자신의 필터를 정의해야 합니다. 아래에서는 필터를 어떻게 정의할지 보겠습니다.
커스텀 필터
필터의 사용 방법은 매우 간단합니다. module의 filter 메서드를 사용하여 함수를 반환하면 됩니다. 이 함수는 입력 값을 받아 처리된 결과를 반환합니다. 더 이상 말하지 않고, 한 예제를 작성해 보겠습니다. 예를 들어, 배열의奇수 인덱스를 반환하는 필터가 필요하다면, 다음과 같은 코드를 작성할 수 있습니다:
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++{
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});
형식은 이렇습니다. 처리 로직은 내부의 클로저 함수에 적혀 있습니다. 자신의 필터가 파라미터를 받을 수도 있으며, 파라미터는 return 함수에 정의되며 두 번째 파라미터로, 또는 더 많은 파라미터로도 정의할 수 있습니다.
필터의 기본 지식이 이렇게 많습니다. 여전히 더 배워야 할 것이 많다면, 프로젝트의 실제 검증이 필요합니다. 따라서, 프로젝트가 오기 전에 먼저 기본을 다져보세요~
이것이 본문의 전부입니다. 많은 도움이 되었기를 바랍니다. 또한,呐喊 교본에 많은 지지를 부탁드립니다.
선언: 본문 내용은 인터넷에서 가져왔으며, 저작권자는 본인입니다. 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용을 발견하신 경우, notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 보내는 경우, #을 @으로 변경하십시오. 관련 증거를 제공하시면, 사이트가 즉시 위반된 내용을 삭제할 것입니다.