Angularjs in Hindi Filters

First Page

Angularjs मे Filter का उपयोग Data को Improved करने के लिए करते है. एक Pipe वर्ण का उपयोग करते हुए Expressions और निर्देशों मे Filter को जोड़ सकते है. Angularjs मे Filter भी Parameters का भी उपयोग किया जा सकता है.

एक Filter User को प्रदर्शित करने के लिए Expression की Value को Formatted करता है. उदाहरण के लिए यदि आप अपने String को Lowercase या सभी को Uppercase मे करना चाहते है तो आप इसमे Filter का उपयोग कर सकते है.

Filter को View Template, Controller, Services मे उपयोग किया जा सकता है. Angularjs मे Built-in Filter एक Collection के साथ आता है.

Types of Filter

Uppercase Filter
Lowercase Filter
Currency Filter
Filter
Orderby

Uppercase Filter

Uppercase Filter का उपयोग String के Characters को Uppercase मे बदलने के लिए किया जाता है. यह एक Input के रूप मे String के एक टुकड़ा को लेता है और इसे Uppercase String मे Convert करता है.

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}}

Lowercase Filter

Lowercase Filter को String के Characters को Lowercase मे बदलने के लिए उपयोग मे लाया जाता है. यह एक Input के रूप मे String के एक टुकड़ा को लेता है और इसे Lowercase String मे Convert करता है.

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}}

Currency Filter

Currency Filter का उपयोग Currency मे Numbers को Format करने के लिए किया जाता है.

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

AngularJS Filter

AngularJS Filter मे Filter का उपयोग किसी दिए गए Array से Items का Subset चुनने के लिए किया जाता है और फिर एक नया स्वरूपित Array Return होता है.

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

AngularJS Filter OrderBy द्वारा प्रदान की गई Predicate Expression के आधार पर एक Array का उपयोग किया जाता है.

Filter का Sign Order Sets करता है (+ is ascending) while (- is descending).

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

For Example

<!DOCTYPE html>
<html>
  <head>
      <title>Angular JS Filters Example</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: "Ali",
               lastName: "Khan",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:60},
                  {name:'Chemistry',marks:70},
                  {name:'Math',marks:55}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Output