Creating custom filter in angular JS

In this tutorial we are going to create custom filter that will truncate text and add ellipsis at the end of modified input.

Create new controller.js.

We want to add new module called filters.

angular.module('filters', [])

.filter('truncate', function(){
      return function(input, limit){
         if(input){
           return (input.length > limit) ? input.substr(0, limit)+'…' : input;
         }
      };
})

As you can see .filter is accepting name of filter as first parameter and callback function as second parameter. First we want to check if input is not empty as that will through some nasty error, then we check if input length is greater than specified limit and if so we will truncate string and add ellipsis.

Now we want to inject filter into our controller.

.controller('App', function($scope, $filter, jsonFilter){


});

Now create index.html file in the same folder as controller.js(you can put it later in different folder to keep structure consistent).

< html lang="en" ng-app="filters" ng-controller="App">


Limit: 
Text: 

{{ truncatedText | truncate:truncateLimit}}
< /html>

In first line of code we included module ng-app="filters" and base controller ng-controller="App".
In next 2 lines we added google angular reference and controller.js scripts.
In 4th and 5th lines we have ng-model which is basically variable name that will bind value.
In 7th line we are using truncate filter. Using double {{ basically means accessing angular js components. truncatedText is input then filter is being applied and finally limit.

{{ input | filter : value}}

Final result