Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to use custom filters in our code in AngularJS

    • 0
    • 2
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 779
    Comment on it

    Filter is one of the important part in angularJS. There are many default filters like:
    1. uppercase
    2. lowercase
    3. orderby
    etc. We can use these filter simply by adding a pipe character (|) in the expression.
    Now we will discuss a custom filter and how to use that filter in our html code. Lets have an example:


    <body ng-app="testFilter">
      <div ng-controller="filterCntrl">
     <h1>{{ originalText }}</h1>
     <h2>{{ filteredText | uppercase }}</h2>
     <h3>{{ filteredText | customFilter }}</h3>


    angular.module('testFilter', [])
    .controller('filterCntrl', function($scope, $filter) {
      $scope.originalText = 'hello';
      $scope.filteredText = $filter('uppercase')($scope.originalText);

    Now the custom filter:

    app.filter('customFilter ', function() { 
      return function(input) {
            return input;
        } else {
            var newInput = input+1;
            return newInput;

    This is how to you can create a logic in the filter and use that filter in your html.

 0 Comment(s)

Sign In

Sign up using

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: