Create Filters in AngularJS

Filters are used to modify the data. They can be used in expression or directives using pipe (|) character. We can use angularjs built in filters or can create filters in angularjs.

There are some commonly used filters in angularjs

uppercase

converts a text to upper case text.

lowercase

converts a text to lower case text.

currency

formats text in a currency format.

filter

filter the array to a subset of it based on provided criteria.

orderby

orders the array based on provided criteria.

Installing AngularJS in Website

To Install angularjs paste the script in head tag of your website layout

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Using built in Filters in AngularJS

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

Create Filters in AngularJS

<div ng-app = "mainApp" ng-controller = "myController">
    <div ng-bind-html="htmlData |safeAs"></div>
</div>

<script>

    var mainApp = angular.module("mainApp", []);

    /*controller*/
    mainApp.controller('myController', function($scope) {
        $scope.htmlData = "<p>Hello AngularJS";
    });

    /*filter*/
    mainApp.filter('safeAs', ['$sce', 
        function($sce) {
            return function (input, type) {
                if (typeof input === "string") {
                    return $sce.trustAs(type || 'html', input);
                }
                console.log("trustAs filter. Error. input isn't a string");
                return "";
            };
        }
    ]);


</script>

Using these methods you can make custom filters in angularjs.

---

See Also

How to Create Multiple Parameters Dynamic Routes in Laravel

Laravel 8 Multiple Database and Resource Routes with Controllers

Optimize Database Queries in Laravel

Flash Messages in AngularJS

Create REST API in Node.js

---

Thanks For Reading :)

Please give your comments :)

Please Must Visit My Website :)

W3Courses