DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > AngularJS - How to Create a Custom Filter - Code Example

AngularJS - How to Create a Custom Filter - Code Example

Ajitesh Kumar user avatar by
Ajitesh Kumar
CORE ·
Oct. 27, 14 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
67.48K Views

Join the DZone community and get the full member experience.

Join For Free

This article represents high level concepts and code sample/example for how to create a custom filter. The demo for the code example given below could be found on this following page: How to Create A Custom Filter. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • Key aspects of creating a custom filter
  • Code Samples – Custom Filter


Key Aspects of Creating Custom Filter

Following are some of the key aspects that one needs to pay attention to, while creating a custom filter:

  • To create a new filter, filter needs to be registered as a new factory function with your module. In the example below, “titlecase” filter is registered with “CustomFilterModule” using the “filter” factory function. Following code represents the “filter” factory function and registration of “titlecase” filter with the module.
angular.module('CustomFilterModule', [])
    .filter( 'titlecase', function() {
return function( input ) {
return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
});
  • filterProvider is used internally to create a filter.
  • The “filter” factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function.
Code Samples – Custom Filter

Pay attention to some of the following in the code below:

  • filter titlecase is used as “|titlecase” to filter name.
  • filter titlecase is created as a factory function of a custom module “CustomFilterModule”.
  • CustomFilterModule that defined the custom filter, titlecase, is included as dependency when loading “HelloApp” module.
<!DOCTYPE html>

<html ng-app="HelloApp">
<head>
<title></title>
</head>
<body ng-controller="HelloCtrl">
  <form>
      <input type="text" ng-model="name"/>
  </form>
  <div>{{name|titlecase}}</div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript">
// Code defining custom module consisting of a filter
// The module needs to be included as dependency for using the filter, titlecase
//
angular.module('CustomFilterModule', [])
       .filter( 'titlecase', function() {
return function( input ) {
       return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
});
// Angular App on this page 
// Included CustomFilterModule as dependency
//
angular.module('HelloApp', [ 'CustomFilterModule'])
    .controller('HelloCtrl', ['$scope', function($scope){
$scope.name = '';
}])
</script>
</body>
</html>

Filter (software)

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Hard Things in Computer Science
  • Implementing HIPAA Technical Safeguards in Your API Platform
  • Migrating Legacy Applications and Services to Low Code
  • How Do You Integrate Emissary Ingress With OPA?

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo