Categories: JavascriptUI

AngularJS – How to Create a Custom Filter – Code Example

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>

[adsenseyu1]

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: angularjs

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago