Create Filters in AngularJS

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.


Recommended

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

Read For more Tutorials about AngularJS


If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedIn.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com

Enter Your Comments Here...

Enter Your Comments Here...

Scroll to top

Subscribe For Latest Updates

Enter your email address to subscribe and receive notifications of posts & updates by email.


Want a Website / App / Digital Marketing Solution

Website & App Development Packages

%d bloggers like this:
We have updated our memberships. Please check here
Close X