AngularJS 필터
파이프 문자 (|)를 사용하여 필터를 표현 및 지침에 추가 할 수 있습니다.
AngularJS 필터
AngularJS 필터는 데이터를 변환하는 데 사용될 수 있습니다.
| 필터 | 설명하다 |
|---|---|
| 통화 | 숫자를 통화 형식으로 형식화합니다. |
| 필터 | 배열 항목에서 하위 집합을 선택하십시오. |
| 소문자 | 형식 문자열은 소문자입니다. |
| Orderby | 표현식에 따라 배열을 배열하십시오. |
| 대문자 | 형식화 된 문자열은 대문자입니다. |
표현식에 필터를 추가합니다
파이프 문자 (|) 및 필터를 통해 필터를 표현식에 추가 할 수 있습니다. .
((다음 두 가지 예에서는 이전 장에서 언급 한 사람 컨트롤러를 사용합니다)))))))
대문자 필터는 문자열을 대문자로 형식화합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "personctrl"> <p> 이름은 {{lastname |입니다 대문자}} </p> </div> <script src = "personController.js"> </script> </body> </html>실행 결과 :
이름 Doe
소문자 필터는 문자열을 소문자로 형식화합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "personctrl"> <p> 이름은 {{lastname |입니다 소문자}} </p> </div> <script src = "personController.js"> </script> </body> </html>실행 결과 :
이름이었다
통화 필터
통화 필터는 숫자를 통화 형식으로 형식화합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "costctrl"> 수량 : <input type = "number"ng-model = "수량"> 가격 : <입력 유형 = "숫자"ng-model = "price"> <p> 총 가격 = {(수량 * 가격) | Currency}}} </p> </div> <cript> var app = angular.Module ( 'myApp', []); App.Controller ( 'costCtrl', function ($ scope.quantity = 1; $ scope.price = 9.99;}); </scrice> </html>실행 결과 :
수량: 가격:
총 가격 = $ 9.99
지침에 필터를 추가합니다
파이프 문자 (|)와 필터를 통해 필터를 지시문에 추가 할 수 있습니다.
Orderby 필터는 표현식에 따라 배열을 배열합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "namesctrl"> <p> 루프 개체 : </p> <ul> <li ng-repeat = "x in names | orderby : 'country'"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "nestontroller.js"> </script> </body> </html>실행 결과 :
루프 객체 :
필터 입력
입력 필터는 파이프 문자 (|)와 콜론 및 모델 이름을 통해 지침에 추가 할 수 있습니다.
필터 필터는 배열에서 하위 집합을 선택합니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "namesctrl"> <p> 입력 필터링 : </p> <p> <input type = "text"ng-model = "test"> </p> <ul> <li ng-repeat = "x 이름의 x | 필터 : testby : 'country'"> {(x.name | case) + ',' + x. </li> </ul> </div> <script src = "nestomcontroller.js"> </script> </body> </html>실행 효과 :
입력 필터링 :
위는 AngularJS 필터에 대한 지식을 요약 한 것입니다. 우리는 나중에 계속 추가 할 것입니다. 필요한 친구는 그것을 참조 할 수 있습니다.