이 단계에서는 자신만의 디스플레이 필터를 만드는 방법을 배웁니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F Step -9
이제 모바일 세부 정보 페이지로 이동하십시오. 이전 단계에서 전화 세부 사항 페이지에는 "true"또는 "false"가 표시되어 전화에 특정 기능이 있는지 여부를 나타냅니다. 이제 우리는 사용자 정의 필터를 사용하여 텍스트 문자열을 그래프로 그래프로 표시합니다. √ "true"; 그리고 × "거짓"으로 ×. 필터 코드가 어떻게 보이는지 봅시다.
8 단계와 9 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
사용자 정의 필터
새 필터를 만들려면 먼저 PhoneCatFilters 모듈을 작성 하고이 모듈에 맞춤형 필터를 등록하십시오.
app/js/filters.js
Angular.module ( 'phonecatfilters', []). 필터 ( 'checkmark', function () {return function (input) {return input? '/u2713': '/u2718';});우리의 필터는 확인 마크입니다. 입력은 true 또는 false이며, 우리는 참 또는 거짓을 나타내는 두 개의 유니 코드 문자 ( /u2713 및 /u2718)를 반환합니다.
필터가 준비되었으므로 PhoneCatFilters 모듈을 기본 모듈 PhoneCat에 종속성으로 등록해야합니다.
앱/JS/App/JS
... Angular.Module ( 'phonecat', [ 'phonecatfilters']) ...
주형
템플릿 코드는 app/js/filter.js 파일에 작성되었으므로 레이아웃 템플릿 에이 파일을 소개해야합니다.
app/index.html
... <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> ...
AngularJS 템플릿에서 필터를 사용하기위한 구문은 다음과 같습니다.
{{expression | 필터}}
전화 세부 사항 템플릿에 필터를 적용합니다.
앱/부분/phone-detail.html
... <dl> <dt> 적외선 </dt> <dd> {{phone.connectivity.infrared | checkmark}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | checkmark}} </dd> </dl> ...시험
다른 구성 요소와 마찬가지로 필터를 테스트해야하며 이러한 테스트는 실제로 완료하기 쉽습니다.
테스트/단위/필터 스펙 .JS
설명 ( '필터', function () {prevereach (module ( 'phonecatfilters')); seciption ( 'checkmark', function () {it ( '부울 값을 유니 코드 체크 마크 또는 크로스로 변환해야한다', Inject (function (checkmarkfilter) {epcit (checkmarkfilter (true)). to ( '/u2713'); wecons (false). tobe ( '/u2718'); });필터 테스트를 수행하기 전에 PhoneCatFilters 모듈의 테스트 인젝터를 구성해야합니다.
./scripts/test/sh를 실행하여 테스트를 실행하면 다음 출력이 표시됩니다.
Chrome : 러너 리셋 ...... 총 4 개의 테스트 (통과 : 4; 실패 : 0; 오류 : 0) (3.00 ms) 크롬 19.0.1084.36 Mac OS : 4 개의 테스트 실행 (전달 : 4; 실패 : 0) (3.00 ms)
이제 AngularJS 내장 필터를 연습하고 다음 바인딩을 index.html에 추가하겠습니다.
또한 입력 상자를 사용하여 모델을 생성하고 필터링 된 바인딩과 결합 할 수 있습니다. index.html에 다음 코드를 추가하십시오.
<input ng-model = "userInput"> 상단에 기반을 둔다 : {{userInput | 대문자}}
요약
사용자 정의 플러그인을 작성하고 테스트하는 방법을 알았으므로 10 단계에서는 AngularJS로 휴대 전화 세부 정보 페이지를 계속 풍부하게하는 방법을 배웁니다.
위는 AngularJS 필터에 대한 정보를 편집 한 것입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!