AngularJs (7) 필터 들 어가 기 (filter)

angularjs
필터 (filter) 는 이름 그대로 입력 을 받 고 어떤 규칙 을 통 해 처리 한 후 처리 한 결 과 를 되 돌려 주 는 역할 을 합 니 다.주로 데이터 포맷 에 사 용 됩 니 다. 예 를 들 어 배열 의 부분 집합 을 가 져 오고 배열 의 요 소 를 정렬 하 는 등 입 니 다.ng 내 장 된 필 터 는 currency (화폐), date (날짜), filter (문자열 일치), json (json 대상 포맷), limito (개수 제한), lowercase (소문 자), uppercase (대문자), number (숫자), orderby (정렬) 입 니 다.모두 9 가지 입 니 다.그 밖 에 필 터 를 사용자 정의 할 수 있 습 니 다. 이것 은 강력 합 니 다. 모든 요 구 를 만족 시 킬 수 있 는 데이터 처리 입 니 다.
필터 의 내용 은 매우 간단 합 니 다. 내 장 된 것 을 어떻게 사용 하 는 지, 자신 이 필 터 를 어떻게 정의 하 는 지 알 면 됩 니 다. 오늘 시스템 학습 을 통 해 다음 과 같이 소개 하 겠 습 니 다.
filter 의 두 가지 사용 방법 1. 템 플 릿 에서 filter 를 사용 하면 {{}} 에서 filter 를 직접 사용 할 수 있 습 니 다. 표현 식 뒤에 따라 | 분할 할 수 있 습 니 다. 문법 은 다음 과 같 습 니 다.
{{expression | filter}} 여러 개의 filter 를 연결 할 수 있 습 니 다. 이전 filter 의 출력 은 다음 filter 의 입력 이 될 것 입 니 다. (어쩐지 파이프 와 똑 같 더 라 니..)
{{expression | filter 1 | filter 2 |...}} filter 는 매개 변 수 를 받 을 수 있 습 니 다. 매개 변 수 는: 분할 합 니 다. 다음 과 같 습 니 다.
{{expression | filter: argument 1: argument 2:...}} {{}} 의 데 이 터 를 포맷 하 는 것 외 에 도 명령 에 filter 를 사용 할 수 있 습 니 다. 예 를 들 어 배열 array 를 먼저 여과 처리 한 다음 에 반복 해서 출력 할 수 있 습 니 다.
2. contrller 와 service 에서 filter 를 사용 하면 우리 의 js 코드 에서 도 필 터 를 사용 할 수 있 습 니 다. 방식 은 바로 우리 가 익숙 한 의존 주입 입 니 다. 예 를 들 어 저 는 contrller 에서 currency 필 터 를 사용 하려 면 이 contrller 에 주입 하면 됩 니 다. 코드 는 다음 과 같 습 니 다.
app. controller ('testC', function ($scope, currency Filter) {$scope. num = currency Filter (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');} 같은 효 과 를 낼 수 있 습 니 다. 다른 filter 를 편리 하 게 사용 할 수 있다 는 장점 이 있 습 니 다.
ng 의 내 장 된 필터 ng 은 9 가지 필 터 를 내 장 했 습 니 다. 사용 방법 은 매우 간단 합 니 다. 문 서 를 보면 알 수 있 습 니 다. 하지만 앞으로 문 서 를 뒤지 지 않 기 위해 서 저 는 여기 서 상세 한 기록 을 하 겠 습 니 다.
1. currency (화폐 처리) 는 currency 를 사용 하여 숫자 를 화폐 로 포맷 할 수 있 습 니 다. 기본 값 은 달러 기호 입 니 다. 필요 한 기 호 를 직접 입력 할 수 있 습 니 다. 예 를 들 어 제 가 인민 폐 를 입력 할 수 있 습 니 다.
{{num | currency: [65509]} 2. date (날짜 포맷) 원생 js 는 날짜 의 포맷 능력 에 한계 가 있 습 니 다. ng 이 제공 하 는 date 필 터 는 기본적으로 일반적인 포맷 요 구 를 만족 시 킬 수 있 습 니 다. 용법 은 다음 과 같 습 니 다.
{{date | date: 'yyyy - MM - dd hh: mm: ss EEEE'}} 매개 변 수 는 원 하 는 형식 을 지정 하 는 데 사 용 됩 니 다. y M d h m s E 는 각각 년 월 일 분 초 주 를 표시 합 니 다. 자 유 롭 게 조합 할 수 있 습 니 다. 포맷 된 자릿수 를 제한 할 수도 있 습 니 다. 또한 매개 변 수 는 특정한 설명 문자열 을 사용 할 수 있 습 니 다. 예 를 들 어 "shortTime" 등 입 니 다.시간 형식 은 12: 05 pm 와 같 습 니 다. ng 은 8 가지 서술 적 인 문자열 을 제공 합 니 다. 개인 적 으로 이런 것들 이 좀 불필요 하 다 고 생각 합 니 다. 저 는 제 뜻 에 따라 원 하 는 형식 을 조합 할 수 있 습 니 다. 이렇게 많은 단 어 를 기억 하고 싶 지 않 습 니 다 ~
3. filter (짝 짓 기) 라 는 filter 라 는 filter (이 이름 이 지 어 졌 다 고 말 할 수 밖 에 없 으 니 헷 갈 리 기 쉽다 -!)하나의 배열 을 처리 한 다음 에 어떤 문자열 이 들 어 있 는 요 소 를 걸 러 내 서 하나의 배열 로 되 돌 릴 수 있 습 니 다. 문자열 배열 일 수도 있 고 대상 배열 일 수도 있 습 니 다. 대상 배열 이 라면 속성 과 일치 하 는 값 을 걸 러 낼 수 있 습 니 다. 하위 문자열 의 일치 규칙 을 정의 하 는 매개 변 수 를 받 습 니 다. 다음 예 를 들 어 매개 변수의 용법 을 설명 하 겠 습 니 다. 저 는 현재 매우 핫 한 값 을 사용 합 니 다.몇 명의 아이들 이 배열 을 정의 했다.
$scope. childrenArray = [{name: 'kimi', age: 3}, {name: 'cindy', age: 4}, {name: 'anglar', age: 4}, {name: 'shitou', age: 6}, {name: 'tiantiantian', age: 5}; $scope. func = function (e) {return e. age > 4;} {children Array | filter: 'a'} / / 일치 속성 값 에 a 가 함 유 된 {children Array | filter: 4} / / 일치 속성 값 에 4 가 함 유 된 {children Array | filter:{name: 'i'}}} / / 매개 변 수 는 대상 입 니 다. name 속성 에 i 가 들 어 있 는 {children Array | filter: func} / 매개 변 수 는 함수 입 니 다. age > 4 로 되 돌아 가 는 4. json (json 대상 포맷) 을 지정 합 니 다.json 필 터 는 js 대상 을 json 문자열 로 포맷 할 수 있 습 니 다. 인자 가 없습니다. 이 물건 이 무슨 소 용이 있 습 니까? 저 는 보통 페이지 에 json 문자열 을 출력 하지 않 습 니 다. 홈 페이지 에 서 는 디 버 깅 을 할 수 있다 고 합 니 다. 네, 좋 은 선택 입 니 다. 또는 js 에 도 사용 할 수 있 습 니 다. 역할 은 우리 가 잘 아 는 JSON. stringify () 와 같 습 니 다. 사용법 은 매우 간단 합 니 다.
{{jsonTest | json} 5. limitto (배열 길이 나 문자열 길이 제한)limito 필 터 는 배열 이나 문자열 을 캡 처 하 는 데 사 용 됩 니 다. 캡 처 길 이 를 지정 하 는 매개 변 수 를 받 습 니 다. 만약 매개 변수 가 마이너스 라면 배열 의 끝부분 부터 캡 처 합 니 다. 개인 적 으로 이 filter 는 약간 취약 하 다 고 생각 합 니 다. 먼저 배열 이나 문자열 의 시작 / 끝 부분 에서 만 캡 처 할 수 있 습 니 다. 그 다음 에 js 원생 함수 가 대체 할 수 있 습 니 다. 어떻게 사용 하 는 지 보 세 요.
{{children Array | limito: 2}} / / 는 배열 의 앞 두 항목 을 표시 합 니 다. lowercase (소문 자) 는 데 이 터 를 모두 소문 자로 바 꿉 니 다. 너무 간단 하고 설명 이 많 지 않 습 니 다. 같은 닭 갈비 필터 입 니 다. 인자 가 없 으 면 전체 문자열 을 소문 자로 바 꿀 수 있 습 니 다. 알파벳 을 지정 할 수 없습니다. 아무리 써 도 쓰기 가 귀 찮 습 니 다.
7. uppercase (대문자) 동상.
8. number (포맷 숫자) number 필 터 는 하나의 숫자 에 천 자리 분할 을 추가 할 수 있 습 니 다. 이렇게 123, 456, 789. 동시에 하나의 인 자 를 받 으 면 float 형식 을 지정 하여 몇 개의 작은 수 를 유지 할 수 있 습 니 다.
{{num | num: 2}} 9. orderby (정렬)orderby 필 터 는 한 배열 의 요 소 를 정렬 할 수 있 습 니 다. 하나의 매개 변 수 를 받 아 정렬 규칙 을 지정 할 수 있 습 니 다. 매개 변 수 는 하나의 문자열 로 이 속성 이름 으로 정렬 할 수 있 습 니 다. 함수 일 수도 있 고 정렬 속성 을 정의 할 수도 있 습 니 다. 배열 일 수도 있 습 니 다. 배열 의 속성 값 에 따라 정렬 할 수도 있 습 니 다.(첫 번 째 항목 에 따라 비교 한 값 이 같 으 면 두 번 째 항목 에 따라 비교) 위의 아이들 배열 을 예 로 들 어 보 세 요.
{{children Array | orderby: 'age'} / / age 속성 값 으로 정렬 합 니 다. - age 라면 거꾸로 {{children Array | orderby: orderFunc} / / 함수 의 반환 값 에 따라 정렬 합 니 다 {{children Array | orderby: ['age', 'name']}}}}/ / age 가 같다 면 name 에 따라 정렬 하여 내 장 된 필 터 를 소 개 했 습 니 다. 나 는 거의 잠 들 것 같 습 니 다..............................................................
사용자 정의 필터 필터 의 사용자 정의 방식 도 간단 합 니 다. module 의 filter 방법 을 사용 하여 함 수 를 되 돌려 줍 니 다. 이 함 수 는 입력 값 을 받 고 처리 한 결 과 를 되 돌려 줍 니 다. 더 이상 말 하지 않 고 필 터 를 써 보 겠 습 니 다. 예 를 들 어 필터 가 필요 합 니 다. 다음 배열 에 홀수 로 표 시 된 요 소 를 되 돌려 줄 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.
app.filter('odditems',function(){ return function(inputArray){ var array = []; for(var i=0;i if(i%2!==0){ array.push(inputArray[i]); } } return array; } }); 형식 은 이 렇 습 니 다. 당신 의 처리 논 리 는 내부 의 패 킷 함수 에 적 혀 있 습 니 다. 필 터 를 받 아들 일 수도 있 습 니 다. 매개 변 수 는 return 의 그 함수 에 정의 되 어 있 습 니 다. 두 번 째 매개 변수 나 더 많은 매개 변수 로 도 가능 합 니 다.
필터 의 기본 지식 은 이 정도 입 니 다. 아니면 그 말 입 니까? 더 배 워 야 할 것 은 프로젝트 의 진정한 시련 이 필요 합 니 다. 그렇다면 프로젝트 가 시작 되 기 전에 기 초 를 다 져 보 세 요 ~
(PS: 불평 을 참 지 못 했 습 니 다. 블 로그 원 편집기 로 편집 한 예 는 무슨 이유 로 바람 이 들 어 움 직 이지 못 했 는 지 예전 에는 잘 있 었 습 니 다. 지난 편 에 서 는 jsfiddle 에서 제공 한 내장 코드 를 사용 해 보 았 지만 방문 속도 가 달팽이 처럼 느 렸 습 니 다. 아, 블 로그 에 예 시 를 삽입 할 수 있 는 좋 은 도구 가 어디 있 습 니까?)