AngularJS의 세계에서 필터는 데이터를 형식화하는 방법을 제공합니다. Angular는 또한 많은 내장 필터를 제공하며 사용자 정의 필터를 만드는 것은 매우 간단합니다.
html 템플릿 바인딩 {{}}에서 |를 사용합니다 필터를 호출하려면. 예를 들어, 문자열이 모든 자본 문자를 표시하기를 원합니다.
{{이름 | 대문자}}물론, 우리는 JavaScript의 $ 필터 서비스를 사용하여 필터를 호출하고 문자열 대문자를 예를 들어 사용할 수 있습니다.
app.controller ( 'democontroller', [ '$ scope', '$ filter', function ($ scope, $ filter) {$ scope.name = $ filter ( '소문자');}]);매개 변수를 필터로 전달하는 방법은 무엇입니까? 필터 다음에 매개 변수를 넣고 중간에 결장을 추가하십시오 (전달할 여러 매개 변수가있는 경우 각 매개 변수 후에 결장을 추가하십시오). 예를 들어, 숫자 필터는 숫자 수를 제한하는 데 도움이 될 수 있습니다. 소수점 이하 두 자리를 표시하려면 숫자를 추가하십시오 : 2.
{{123.456789 | 번호 : 2}}필터 필터는 주로 데이터 배열을 필터링하고 서브 어레이링 데이터가 포함 된 새 배열을 반환하는 데 사용됩니다.
예를 들어, 클라이언트 쪽을 검색 할 때 배열에서 원하는 결과를 빠르게 필터링 할 수 있습니다.
이 필터 메소드는 배열 요소를 선택/제거하기 위해 문자열, 객체 또는 함수 매개 변수를 수신합니다.
자세히 살펴 보겠습니다.
1. 내장 필터
1, 대문자, 소문자 크기 변환
{{ "하단 캡 문자열"| 대문자}} // 결과 : 하단 캡 문자열 {{ "탱크가 양호"| 소문자}} // 결과 : 탱크가 좋습니다｜ 여기서 수직선은 파이프 라인 기능입니다. Linux에 익숙한 경우이 부분의 파이프 라인 기능은 기본적으로 2와 동일합니다.
{{{foo : "bar", baz : 23} | json}} // 결과 : { "foo": "bar", "baz": 23}참고 : BZA에는 서식 전에 이중 인용문이 없으며 서식 후 JSON 데이터로 변환됩니다.
3. 날짜 서식
mysql timestamp ng-bind = "message.time * 1000 | date : 'yyyy-mm-dd'"
{{1304375948024 | 날짜 : 'medium'}} // 2011 년 5 월 3 일 06:39:08 pm {{1304375948024 | 날짜}} // 결과 : 2011 년 5 월 3 일 {{1304375948024 | 날짜 : "mm/dd/yyyy @ h : mma"}} // 결과 : 05/03/2011 @ 6:39 am {{1304375948024 | 날짜 : "YYYY-MM-DD HH : MM : SS"}} // 결과 : 2011-05-03 06:39:084. 번호 형식
{{1.234567 | 번호 : 1}} // 결과 : 1.2 {{1234567 | 번호}} // 결과 : 1,234,5675. 통화 통화 형식
{{250 | Currency}} // 결과 : $ 250.00 {{250 | 통화 : "rmb ￥"}}} // 결과 : RMB ￥ 250.006. 필터 검색은 키가 아닌 값 만 확인할 수 있습니다
{[{ "age": 20, "id": 10, "name": "iPhone"}, { "age": 12, "id": 11, "name": "sunm xing"}, { "age": 44, "id": "name": "test abc"} | 필터 : 's'}} // 위의 예제로 행을 찾습니다. 12, "id": 11, "name": "sunm xing"}, { "age": 44, "id": "name": "test abc"}] | 필터 : { 'name': 'ip'}}} // ip와 같은 이름 줄을 찾으십시오. // 위의 예의 결과 : [{ "age": 20, "id": 10, "name": "iPhone"}] $ filter ( 'number') (30000, 2); var jsonstring = $ filter ( 'json') ({ "age": 12, "id": 11, "name": "sunm xing"}, { "age": 44, "id": 12, "name": "test abc"}])).7. Limitto String, Object Intercept
{{ "나는 탱크를 좋아한다"| limitto : 6}} // 결과 : 나는 사랑 {{ "I Love Tank"| limitto : -4}} // 결과 : 탱크 {[{age ": 20,"id ":"10, "name": "iPhone"}, { "age": 12, "id": 11, "name": "sunm xing"}, { "Age": 44, "id": 12, "": "test abc"}] | limitto : 1}} // 결과 : [{ "age": 20, "id": 10, "name": "iPhone"}]8. 객체 정렬을 주문하십시오
{[{ "age": 20, "id": 10, "name": "iPhone"}, { "age": 12, "id": 11, "name": "sunm xing"}, { "age": 44, "id": "name": "test abc"} | Orderby : 'id': true}} // 루트 ID 하강 순서 {{[{ "age": 20, "id": 10, "name": "iPhone"}, { "age": 12, "id": "name": "sunm xing"}, { "age": 44, "id": "name": "test abc"}} | Orderby : 'id'}} // 정렬 된 {[{age ": 20,"id ": 10,"name ":"iPhone "}, {"age ": 12,"id ": 11,"name ":"sunm xing "}, {"Age ": 44,"id ": 12," ":"test abc "}] | Orderby : [ '-Age', 'Name']}}2. 사용자 정의 필터 기능
필터의 사용자 정의 방법도 매우 간단합니다. 모듈의 필터 방법을 사용하여 입력 값을 수신하고 처리 된 결과를 반환하는 함수를 반환하십시오.
app.filter ( '필터 이름', function () {반환 함수 (필터링 해야하는 객체, 필터 매개 변수 1, 필터 매개 변수 2, ...) {//..기본 AngularJS MVC 프레임 워크, phonecat 및 사용자 정의 필터를 찾았습니다. 이 프레임 워크는 매우 유용합니다.
Filters.js 모듈을 추가합니다
Angular.Module ( 'TankTest', []). Filter ( 'TankReplace', function () {return function (input) {return input.replace (/tank/, "=====");});HTML에서 호출
{{ "탱크가 좋다"| 소문자 | TankReplace}} // 결과 : ===== 좋은 것입니다참고 : | 소문자 | TankReplace 파이프 라인 명령에는 여러 가지가 있습니다
yourApp.filter ( 'OrderObjectby', function () {return function (항목, 필드, 리버스) {var 필터링 = []; Angular.Foreach (항목, fil };})이 필터는 객체를 표준 어레이로 변환하고 지정한 필드로 정렬합니다. OrderObjectby 필터를 사용하여 필드 이름의 부울 값을 포함하여 Orderby와 유사합니다. 다시 말해, 가짜는 오름차순 순서, 실제 쇠퇴입니다. HTML 호출
<li ng-repeat = "항목의 항목 | OrderObjectby : 'color': true"> {{item.color}} </li>정렬 검색
<입력 유형 = "text"ng-model = "search"placeholder = "search"> <thead> <tr> <!-ng class = "{dropup : true}"-> <th ng-click = "changeorder ( 'id')"ng class = "{dropup : order ==" '} "> 제품 번호 <span ng class ="{span ng class = " 'id'} "> </span> </th> <th ng-click ="changeOrder ( 'name') "ng-class ="{드롭 up : dropup : dropup : order === '' '} "> 제품 이름 <span ng class ="{OrderColor : orderType ==='name '} "> </span> </th> <th change ('ng-click ="ng-click = "ng-click =" Order === ''} "> 제품 가격 <span ng-class ="{OrderColor : OrderType === 'price'} "> </span> </th> </tread> <ttr ng-repeat ="ProductData의 항목 : search | <td> {{item.name}} </td> <td> {{item.price | 통화 : '￥'}} </td> </tr> </tbody>Angularjs
// 기본 정렬 필드 $ scope.OrderType = 'id'; $ scope.order = '-'; $ scope.changeorder = function (type) {console.log (type); $ SCOPE.ORDERTYPE = 유형; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}