Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to Create Custom Filters in AngularJS?

    @deepika.rana
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3
    • 0
    • 542
    Comment on it

    Custom Filters in AngularJS

    The data can be modified through filters in Angularjs. AngularJS not only provides built in filters but also provides with the capability of creating custom filters. Custom filters can be created through ".filter" method.

     

    Syntax of creating custom filter

    var app = angular.module('Applicationname',[])

app.filter('', function () {
  return function () {
    return;
  };
});

     

    Whenever angular calls the filter the returned function in above syntax gets called i.e there is two-way binding for filters. Whenever a change is made by the user the filter will run and will provide the updates as necessary.

     

    Example to create the uppercase custom filter:-

    <html>
  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
<body ng-app="mainapp" ng-controller="maincontroller">
	<p>The Url of the page is:</p>
	{{localurl | Uppercase }}
	<script>
		var app = angular.module("mainapp",[]);
		app.filter('Uppercase', function () {
			return function (item) {
				return item.toUpperCase();
			};
		});

		app.controller("maincontroller",function($scope,$location){
			$scope.localurl = $location.absUrl();
		})
	</script>
	
</body
</html>

    Explanation of above program :-

    In above program within script section a custom filter named "Uppercase" is defined which takes an argument named item and convert it into uppercase and returns the converted data. Now this defined filter can be used with any data in order to make the data into uppercase. In above example an inbuilt service "$location" is used which when uses method "absUrl()" returns information related to current web page location. This information is then converted into uppercase through created filter "Uppercase"

     

     

    Output :-

     


    Creation of custom filter for ng-repeat

     

    <html>
  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
<body ng-app="mainapp" ng-controller="maincontroller">
	 <input type="text" ng-model="initialletter" placeholder="Enter initialletter to filter">
	 <ul>
		<li ng-repeat="state in states|startsWithInitialLetter:initialletter">
			<p>{{state}}</p>
		</li>
	</ul>
	<script>
	
		var app = angular.module("mainapp",[]);
		app.filter('startsWithInitialLetter', function () {
            return function (items, initialletter) {
            var filtereddata = [];
            var matchingLetter = new RegExp(initialletter, 'i');
			for (var i = 0; i < items.length; i++) {
				var item = items[i];
				if (matchingLetter.test(item.name.substring(0, 1))) {
					filtereddata.push(item);
				}
			}
			return filtereddata;
		};
	});

		app.controller("maincontroller",function($scope){
		    $scope.states = [{
			 name : 'Dehradun'
			 },{
			 name : 'Goa'
			 },{
			 name : 'Arunachal Pradesh'
			 },{
			 name : 'Gujarat'
			 }
			 ]
		})
	</script>
</body
</html>

     

    Explanation of above program :-

    In above program a custom filter named "startsWithInitialLetter" is defined which takes items,initialletter and filter these items according to initial letter i.e only those words with starting letter in input box will be displayed. An array of states is defined within controller then this array is looped through "ng-repeat" but when looped are passed through custom filter "startsWithInitialLetter" along with initial letter on basis of which items in array will filter out. When there is no letter in input box all items in array are displayed. 

     

    Output 1: When no letter is entered in input box

    Output 2: When a letter is entered in input box to filter out items

     

     

     

    How to Create Custom Filters in AngularJS?
    AngularJS Custom Filters uppercase custom filter
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: