AngularJS-필터

필터는 데이터를 수정하는 데 사용됩니다. 파이프 (|) 문자를 사용하여 표현식 또는 지시문에서 클럽으로 만들 수 있습니다. 다음 목록은 일반적으로 사용되는 필터를 보여줍니다.

Sr. 아니. 이름 및 설명
1

uppercase

텍스트를 대문자 텍스트로 변환합니다.

2

lowercase

텍스트를 소문자 텍스트로 변환합니다.

currency

통화 형식으로 텍스트 서식을 지정합니다.

4

filter

제공된 기준에 따라 배열을 하위 집합으로 필터링합니다.

5

orderby

제공된 기준에 따라 배열을 정렬합니다.

대문자 필터

파이프 문자를 사용하여 식에 대문자 필터를 추가합니다. 여기에 학생 이름을 모두 대문자로 인쇄하기 위해 대문자 필터를 추가했습니다.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

소문자 필터

파이프 문자를 사용하여 표현식에 소문자 필터를 추가합니다. 여기에 학생 이름을 모두 소문자로 인쇄하기 위해 소문자 필터를 추가했습니다.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

통화 필터

파이프 문자를 사용하여 숫자를 반환하는 표현식에 통화 필터를 추가합니다. 여기에 통화 형식을 사용하여 수수료를 인쇄하는 통화 필터를 추가했습니다.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

필터

필수 주제 만 표시하려면 subjectName을 필터로 사용합니다.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

OrderBy 필터

표식으로 주제를 주문하려면 orderBy 표식을 사용합니다.

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

다음 예는 위에서 언급 한 모든 필터의 사용을 보여줍니다.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Filters</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Enter fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
            <tr>
               <td>Enter subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
            </tr>
            <tr>
               <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
            </tr>
            <tr>
               <td>fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
            <tr>
               <td>Subject:</td>
               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65}
               ],
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

산출

웹 브라우저에서 testAngularJS.htm 파일을 엽니 다 . 결과를 확인하십시오.