웹 프론트엔드 JS 튜토리얼 AngularJS 필터 사용법에 대한 자세한 설명_AngularJS

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

May 16, 2016 pm 03:23 PM

AngularJS의 필터인 중국어 이름 "filter"는 변수 값을 필터링하거나 출력 형식을 지정하여 원하는 결과나 형식을 얻는 데 사용됩니다.

필터 소개

필터는 데이터 형식을 지정하는 데 사용됩니다.

Filter의 기본 프로토타입('|'은 Linux의 파이프 모드와 유사):

{{ expression | filter }}
로그인 후 복사

필터는 체인으로 사용할 수 있습니다(즉, 여러 필터를 연속적으로 사용함).

{{ expression | filter1 | filter2 | ... }}
로그인 후 복사

필터는 여러 매개변수를 지정할 수도 있습니다.

{{ expression | filter:argument1:argument2:... }}
로그인 후 복사

1. 뷰 템플릿에서
을 사용합니다.

표현식에 필터 적용

형식은 다음과 같아야 합니다.

{{ 표현식 | 필터 }} 즉, {{ 표현식 필터 }}

예: {{ 12 | 통화 }} 출력은 $12.00

출력 결과에 필터 적용

간단히 말하면 필터의 중첩입니다. 이전 필터의 출력 결과가 다음 필터의 입력 데이터 소스로 사용됩니다.

형식은 다음과 같아야 합니다.

{{ 표현식 | 필터1 | 필터2 | ... }} 즉, 표현식(표현식)이 필터 1로 필터링된 다음 필터 2로 필터링됩니다...

매개변수로 필터링

필터 뒤에는 특별한 요구 사항과 필수 필터를 구현하는 데 도움이 되는 하나 이상의 매개 변수가 올 수 있습니다.

형식은 다음과 같아야 합니다.

{{ 표현식 | 필터:인수1:인수2:... }}

예: {{ 1234 | 숫자:2 }} = 1,234.00

2. AngluarJS 내장 필터 사용

AngularJS는 9개의 내장 필터를 제공합니다

통화, 날짜, 필터, json, LimitTo, 대문자, 소문자, 숫자, orderBy입니다.

구체적인 사용법은 AngularJS 문서에 자세히 설명되어 있습니다. 다음은 일반적으로 사용되는 몇 가지 사항입니다.

통화 필터

currency – 변수를 통화 표현으로 변환하는 데 사용됩니다

예: {{ 금액 | 통화}}

대소문자 필터(대소문자 필터)

예:

{{ "소문자 문자열" 대문자 }}
<input ng-model="userInput"> 대문자: {{ userInput | 대문자 }}

날짜 필터(날짜 필터)

예:

{{ 1304375948024 날짜 }}
{{ 1304375948024 | 날짜:"MM/dd/yyyy @ h:mma" }}

json 필터

예:

{{ {foo: "bar", baz: 23} }}

컨트롤러, 서비스 및 중요 요소에 필터 사용

AngularJS 컨트롤러, 서비스 또는 지시문에서 필터를 사용할 수 있습니다. 이때 컨트롤러, 서비스 또는 지시문의 종속성에 종속 필터 이름을 추가해야 합니다.

컨트롤러에서 직접 필터를 사용하여 컨트롤러가 필요에 따라 필터를 호출할 수 있도록 합니다

3. 커스텀 필터(filter)

AngularJS에서 사용자 정의 필터를 작성하는 형식은 AngularJS의 팩토리 서비스와 매우 유사합니다. 작성 시 매개변수가 두 개 이상인 함수만 필요하다는 점을 기억해야 합니다.

대략 형식은 다음과 같습니다.

app.filter('filter(过滤器)名称',function(){ 
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
//...执行业务逻辑代码 
return 处理后的对象; 
}
}); 
로그인 후 복사


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

10 JQuery Syntax Highlighter 10 JQuery Syntax Highlighter Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighter

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

10 JavaScript & JQuery MVC 자습서 10 JavaScript & JQuery MVC 자습서 Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC 자습서

See all articles