필터는 수정 된 데이터를 변경하는 데 사용되며 표현식 또는 파이프 문자 지침을 사용하여 분류 할 수 있습니다. 아래는 일반적으로 사용되는 필터 목록입니다.
| S.No. | 이름 | 설명하다 |
|---|---|---|
| 1 | 수도 | 텍스트를 대문자 텍스트로 변환합니다. |
| 2 | 소문자 | 텍스트를 소문자로 변환합니다. |
| 3 | 통화 | 통화 형식 텍스트. |
| 4 | 필터 | 필터 서브 세트 배열은 제공된 기준을 기반으로합니다. |
| 5 | 종류 | 정렬은 표준 기본 어레이를 제공합니다. |
캡 필터
파이프 문자 표현식을 사용하기 위해 대문자 필터를 추가하십시오. 여기에는 대문자 필터가 추가되고 학생의 이름은 대문자로 인쇄됩니다.
이름을 입력하십시오 : <input type = "text"ng-model = "student.firstname"> 성을 입력하십시오 : <input type = "text"ng-model = "student.lastname"> 상류의 이름 : {{whity.fullname () | 대문자}}소문자 필터
파이프 문자 표현을 사용하여 소문자 필터를 추가하십시오. 여기에 소문자 필터를 추가하여 학생 이름을 소문자로 인쇄하십시오.
이름을 입력하십시오 : <input type = "text"ng-model = "student.firstname"> 성을 입력하십시오 : <input type = "text"ng-model = "student.lastname"> 상류의 이름 : {{whity.fullname () | 소문자}}통화 필터
캐나다 달러 필터는 파이프 문자를 사용하여 숫자의 표현을 반환합니다. 여기서는 통화 형식을 사용하여 통화의 인쇄 수수료에 필터를 추가했습니다.
수수료를 입력하십시오 : <input type = "text"ng-model = "student.fees"> 수수료 : {{whient.fees | 통화}}필터 용 필터
원하는 주제 만 표시하기 위해 제목 이름을 필터로 사용합니다.
입력 : <입력 유형 = "text"ng-model = "sublleame"> 제목 : <ul> <li ng-repeat = "student.subjects | subjectname"> {{istourd.name + ', marks :' + subject.marks} </li> </ul>필터를 정렬하십시오
태그별로 주제를 정렬하려면 OrderBy 태그를 사용합니다.
제목 : <ul> <li ng-repeat = "student.subjects | orderby : 'marks'"> {{istourd.name + ', marks :' + subject.marks}} </li> </ul>예
다음 예제는 위에서 언급 한 모든 필터를 보여줍니다.
testangularjs.html
<html> <head> <title> Angular JS 필터 </title> </head> <h2> Angularjs 샘플 응용 프로그램 </h2> <div ng-app = ""ng-controller = "StudentController"> <table> <td> <td> 입력 : </td> <input type = "text" ng-model = "studl.firstname"> </td> </td> </tr> <tr> <td> 성을 입력합니다 : </td> <td> <input type = "text"ng-model = "withy.lastname "> </td> </td> Enter 요금 : </td> <td> <input type ="text " ng-model = "student.fees"> </td> </td> <td> 제목을 입력하십시오 : </td> <td> <입력 유형 = "text"ng-model = "subjectname"> </td> </tr> </tr> </td> <td> <td> {{whiting (student.)) | 대문자}} </td> </tr> <tr> <td> 소문자의 이름 : </td> <td> {{when저 .fullname () | 소문자}} </td> </tr> <tr> <td> 요금 : </td> <td> {{whening.fees | Currency}}} </td> </tr> <tr> <td> 제목 : </td> <td> <ul> <li ng-repeat = "student.subjects | filter : subjectName | orderby : 'marks'"> {{subject.name + ', marks :' + subject.marks}}. </li> </ul> </td> </tr> </table> </div> <cript> 함수 StudentController ($ scope) {$ scope.student = {firstName : "Mahesh", LastName : "Parashar", Fees : 500, 주제 : [{name : 'physics', marks : 70}, chemistres ': 80}, {이름 : 'math', marks : 65}], fullName : function () {var stutentObject; StudentObject = $ scope.student; return studentObject.firstName + "" + windentObject.LastName; }};}}} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>산출
웹 브라우저에서 TextAngularjs.html을 열고 다음 결과를 확인하십시오.
위는 AngularJS 필터를 분류하는 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!