AngularJS Custom Filter

Creating custome filter in AngularJS is quite easy. To create custome filter you need to register a new filter function with your module. Your function must return a new filter function which takes input value as the first argument. See below example.

Syntax

var app = angular.module('myApp', []);
   .filter('FilterName', function() {
    return function(input) {
      return variable;
    };
  })

AngularJS Custom Filter Example

<html>
<head>
<title>My first AngularJS Custom Filter Code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<script>
var app = angular.module('myApp', []);

//Adding custom filter here
app.filter('CharCount', function() {
    return function(input) {
      input = input || '';
      var counter = 0;
      for (var i = 0; i < input.length; i++) {
        if(input.charAt(i) != ' ')
         counter = counter + 1;
      }
      
      return counter;
    };
  })

  //Adding controller here
   app.controller('CustomerController', function($scope) {
      $scope.Name = "Jimi Scott";
    });

</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CustomerController"> 
<input ng-model="Name" type="text"><br>
  Character Count: {{Name|CharCount}}<br>
</div>
</div>
</body>
</html>

See Live Example

AngularJS Basic Code Examples 08

How to start with AngulatrJS

What is module and how to create module in AngularJS

What is controller and how to create controller in AngularJS

How to register controller with module in AngularJS

How to bootstrap the AngularJS application

What is expression in AngularJS

What is directives in AngularJS

How to create controller function in AngularJS

AngularJS Expression Code Examples 10

A simple expression example in AngularJS

AngularJS expression with ng-init

AngularJS expression without ng-app

AngularJS expression with number

AngularJS expression with string

AngularJS expression with object

AngularJS expression using ng-bind with number

AngularJS expression using ng-bind with string

AngularJS expression using ng-bind with object

AngularJS expression with array

AngularJS Filters Code Examples 21

Display fixed element from array using limitto filter

Set start position to display array elements using limitto filter

Sort array data using orderby filter

Display precision decimal places using number filter

Display json formatted data using json filter

Format date using date filter

Format string in lowercase using lowercase filter

Format string in uppercase using uppercase filter

Format number as currency using currency filter

Search data from array using filter

Search specific data from array using filter

Sort array in ascending order using orderby filter

Sort array in descending order using orderby filter

Extract subset of array using limitto filter

Extract substring from string using limitto filter

Set custom date format using date filter

Display currency symbols other than dollar in angularjs

Display rupee symbol in angularjs

Format number as text in angularjs

Create custom filter in angularjs

Angularjs create custom display filter

AngularJS Table Code Examples 06

How to display data in table format

How to add css in table

Display alternate color in table row

Display table header in uppercase

Display table with orderby column data

How to add index column in table

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Recent Articles

Getting Started With ASP.NET Core MVC Application

Setup and Installation ASP.NET Core 1.0

Understanding ASP.NET Core 1.0

Customize User Profile Info in MVC With ASP.NET Identity

How to extend the properties of Identity with additional custom properties in ASP.NET

ASP.NET Identity Authentication - User Login and Registration Form

Understanding ASP.NET Identity

Implement custom user registration and login page with the help of Entity Framework using AES encryption in ASP.NET MVC application

Export Report as CSV or XLSX or XLS from ReportViewer in ASP.NET

JQGrid Server-Side processing using HttpHandler in ASP.NET