데모
다음은 전체 예제 데모입니다
1. Filter.js 파일
Angular.Module ( "emabeseApp", []). 상수 ( "Producturl", "http : // localhost :/products") .controller ( "defaultctrl", function ($ scope, $ http, productsUrl) {$ http.get (upputurl). scope (data) {$ scope. 배열});});여기서 나는 소개 된 서비스를 상수로 사용하며, 글을 쓰는 장점은 쉽게 수정할 수 있다는 것입니다.
$ http 서비스를 사용하는 방법은 내 Angularjs (iii) 배포를 참조하십시오.
<! docType html> <html xmlns = "http://www.w.org//xhtml"ng-app = "emaffplepp"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-"</title> src = "angular.js"> </script> <link href = "bootstrap-theme.css"rel = "stylesheet"/> <link href = "bootstrap.css"rel = "Stylesheet"/> <Script Src = "Filter.js"> > <div> <div> <h> 제품 </h> </div> <table> <thead> <td> <td> name </td> <td> 카테고리 </td> <td> price </td> <td> expiry </td> </td> </thead> <tbody> <ttr ng-repeat = "item in airt"> 대문자}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}} </td> <td> {{item.expiry | 번호}} </td> <td> {{item | json}} </td> </tr> </tbody> </table> </div> </body> </html>실행 결과 :
필터를 사용하십시오
필터는 두 가지 범주로 나뉩니다.
1. 개별 데이터 필터링
2. 세트에서 작동합니다.
1. 데이터를 작동하는 것은 비교적 간단합니다 . 데모에 표시된 것처럼 {{item | 통화}} 등
통화 : "F"는 가격이 파운드로 필터링 될 수 있습니다.
단일 데이터 필터는 필터 다음에 해당 형식 문자로 데이터 형식을 필터링하려고합니다.
숫자 : 예약 된 자리 가하의 데이터를 나타냅니다.
2 : 수집 필터링 , 컬렉션에서 특정 번호를 필터링합니다.
기본 데모에서 다음을 추가했습니다.
<div> <h> 제품 </h> </div> <div> 한계 : <ng-model = "limitvalue"ng-options = "p for p for p for p for p in limitrange"> </select> </div> filter.js가 추가되었습니다 : $ http.get. $ scope.limitValue = ""; // 문자열 인 경우 <span style = "back } </span> </span>}); <tr ng-repeat = "제품의 항목 | limitto : limitvalue"> <td> {{item.name | 대문자}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}} </td> <td> {{item.expiry | 번호}} </td> <td> {{item | json}}} </td> </tr> <span style = "line-height :.기능을 작성할 때는 JSON 데이터가 비동기 적으로 얻어 지므로 성공적으로 작성해야합니다.
결과:
한계 : 페이지에 표시된 수를 조정할 수 있습니다.
필터를 만듭니다
AngularJS에는 두 개의 필터가 있습니다. 먼저, 출력 문자열 첫 글자 자본화와 같은 개별 데이터를 형식화하는 필터를 만들 수 있습니다.
먼저 필터를 정의하는 방법에 대해 이야기 해 봅시다. 필터는 module.filter를 통해 생성되며 생성의 일반적인 형식은 다음과 같습니다.
Angular.Module ( "emaxPleApp") // 모듈을 얻는 것을 의미합니다. 필터는 모듈 아래에서 생성됩니다.
.filter ( "labelcase", function () {// 두 매개 변수를 받고 첫 번째 매개 변수는 필터의 이름을 나타내고 두 번째 매개 변수는 공장 기능입니다.
반환 함수 (값, 리버스) {// 작업자 함수를 반환하여 해당 필터링 프로세스를 필터링합니다. 첫 번째 매개 변수는 형식화되어야하는 객체를 나타내고, 두 번째 매개 변수는 구성과 따라야 할 형식을 나타냅니다.
if (angular.isstring (value)) {var intermediate = reverse? value.touppercase () : value.tolowercase (); return (reverse? intermediate []. tolowercase () : intermediate []. touppercase () + intermediate.substr ());} else {return value;}}});나는 이것을 JS 파일에 썼다. CustomFilter.js 추가하는 것을 잊지 마십시오.
<link href = "bootstrap.css"rel = "스타일"/> <script src = "filter.js"> </script> <script src = "customfilter.js"> </script>
Ok 이제 데이터를 변경하겠습니다.
<td> {{item.name | 레이블 케이스 : true}} </td>앞에서 언급했듯이 구성 정보를 추가 해야하는 경우 필기 형식은 필터 : 옵션입니다.
물론 기본 매개 변수는 기록되지 않을 수 있으며 기본값은 NULL 또는 정의되지 않습니다.
결과:
각 데이터를 처리하기 위해 필터 기능을 사용자 정의하는 것은 간단합니다.
2. Limitto와 마찬가지로 컬렉션으로 처리 된 기능을 사용자 정의하십시오.
Angular.Module ( "emaMPLEAPP"). 필터 ( "레이블 케이스", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? intermediate.substr ());} else {return value;}}}). filter ( "skip", function () {return function (data, count) {if (angular.isarray (data) && angular.isnumber (count)) {if (data.length <count || count <) {return data;} {return data.slice (retak.slice)} 데이터;}}});HTML 수정 된 부분 :
<tr ng-repeat = "제품의 항목 | 건너 뛰기 :">
결과 : 총 6 개의 데이터가 있으며 스킵 필터를 사용하여 2 개 조각이 전달되었습니다.
필터를 사용자 정의 할 때 필터가 정의 된 것으로 나타났습니다. 반복적으로 정의하고 싶지 않습니다. 어떻게해야하나요? 생성 된 필터를 사용하여 생성 할 수도 있습니다.
Angular.Module ( "emaMPLEAPP"). 필터 ( "레이블 케이스", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? intermediate.substr ());} else {return value;}}}). filter ( "skip", function () {return function (data, count) {if (angular.isarray (data) && angular.isnumber (count)) {if (data.length <count || count <) {return data;} {return data.slice (retak.slice)} 데이터;}}}). 필터 ( "테이크", 함수 ($ 필터) {// 팩토리 기능에서 AngularJS의 내장 서비스를 참조하는 것을 볼 수 있습니다. return function (data, skipcount, takecount) {// 여기에 세 매개 변수를 전달하는지 확인할 수 있습니까? $ filter ( "limitto") (skipdata, takecount); // limitto는 내장 필터});$ 필터 ( 'Skip')는 기능을 반환하기 때문에 스킵 필터를 호출하므로 매개 변수를 계속 전달할 수 있습니다.
<tr ng-repeat = "제품의 항목 | take ::">
결과:
그것이 필터가 수행되는 방식입니다. 매우 간단하지 않습니까?