Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 12th, 2016
AngularJS filters

Filters can change how data is shown to the user. For example it will let you sort items in a table, change a number to a currency or change a date-timestamp to a readable date and/or time.
This can come in handy when getting plain data from a database.

Default filters

There are some default filters to use, since the documentation is pretty clear about this I’m not going to explain these.
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase

Custom filters

As usually make an Angular app. Then use the filter factory with the name of the filter as first argument. The second argument is the JavaScript function which returns another function.
The inner function is the function which will be executed as filter. The return value of that function is what the data has changed into.

In this example we are going to make an filter that changes ‘a’ to ‘@’, ‘o’ to ‘0’ and ‘i’ to ‘!’. I will call this filter ‘weirdify’. I want to create an option to only convert the lowercase letters or converting both uppercase and lowercase.

angular.module('myFilterApp', [])
  .filter('weirdify', function() {
    return function(input, onlyLowercase) {
      var output = input;
      // Magically change the input.
      return output;
    }
  };
);

Since we want to do change multiple characters it’s better to create a function we can call. I called this function ‘changeCharacterTo’. I won’t explain the working of the function because it’s just plain JavaScript. What this function does is expecting a target string, the substring to change and a second substring to change into.

angular.module('myFilterApp', [])
.filter('weirdify', function() {
  return function(input, onlyLowercase) {
    var changeCharacterTo = function(target, char, to) {
      var splitInput = target.split(char),
        out = splitInput[0];
      for (var i = 1; i < splitInput.length; i++) {
        out += to + splitInput[i];
      }
      return out;
    };

    var output = input;
    // Magically change the input
    return output;
  }
});

Now we can finally make the magical part of the filter. We only have to call the function we just created a few times and put it in the output again.

angular.module('myFilterApp', [])
.filter('weirdify', function() {
  return function(input, onlyLowercase) {
    var changeCharacterTo = function(target, char, to) {
      var splitInput = target.split(char),
        out = splitInput[0];
      for (var i = 1; i < splitInput.length; i++) {
        out += to + splitInput[i];
      }
      return out;
    };

    var output = input;
    output = changeCharacterTo(output, "a", "@");
    output = changeCharacterTo(output, "o", "0");
    output = changeCharacterTo(output, "i", "!");

    return output;
  };

At this moment we have don’t check for the argument. We will add this too. When we should change both uppercase and lowercase character we will just convert the input string to lowercase.

angular.module('myFilterApp', [])
.filter('weirdify', function() {
  return function(input, onlyLowercase) {
    var changeCharacterTo = function(target, char, to) {
      var splitInput = target.split(char),
        out = splitInput[0];
      for (var i = 1; i < splitInput.length; i++) {
        out += to + splitInput[i];
      }
      return out;
    };

    var output = input;
    if (!onlyLowercase) {
      output = input.toLowerCase();
    }
    output = changeCharacterTo(output, "a", "@");
    output = changeCharacterTo(output, "o", "0");
    output = changeCharacterTo(output, "i", "!");

    return output;
  };

Now we create the controller like we normally would and use the filter the same as others.

angular.module('myFilterApp', [])
.filter('weirdify', function() {
  return function(input, onlyLowercase) {
    var changeCharacterTo = function(target, char, to) {
      var splitInput = target.split(char),
        out = splitInput[0];
      for (var i = 1; i < splitInput.length; i++) {
        out += to + splitInput[i];
      }
      return out;
    };

    var output = input;
    if (!onlyLowercase) {
      output = input.toLowerCase();
    }
    output = changeCharacterTo(output, "a", "@");
    output = changeCharacterTo(output, "o", "0");
    output = changeCharacterTo(output, "i", "!");

    return output;
  };
})
.controller('MyController', ['$scope', 'weirdifyFilter', function($scope, weirdifyFilter) {
  $scope.greeting = 'An ape was fighting for a banana';
  $scope.filteredGreeting = weirdifyFilter($scope.greeting);
}]);

And of course the HTML file itself:

<body ng-app="myFilterApp">
  <div ng-controller="MyController">
    <input ng-model="greeting" type="text"/>
    <br /> No filter: {{greeting}}
    <br /> Weirdify: {{greeting|weirdify}}
    <br /> Weirdify lowercase: {{greeting|weirdify:true}}
    <br /> Weirdify, filtered in controller: {{filteredGreeting}}
    <br />
  </div>

This will result in:

No filter: An ape was fighting for a banana
Weirdify: @n @pe w@s f!ght!ng f0r @ b@n@n@
Weirdify lowercase: An @pe w@s f!ght!ng f0r @ b@n@n@
Weirdify, filtered in controller: @n @pe w@s f!ght!ng f0r @ b@n@n@

See the filter in live action

Posted by Stefan Janssen

Leave a Reply

Your email address will not be published. Required fields are marked *