AngularJS Filter Tutorial
Introduction
Filters allow us to perform a number of incredibly useful things on bindings in views within our AngularJS applications. By definition filters select a subset of items from an array and returns it as a new array.
By employing filters we are able to easily manipulate entire arrays in the front-end giving us far more power in the way we wish to display our data.
The Official Documentation for filters can be found here: AngularJS Filter Documentation
Capitalization
Capitalization is a very simple way to demonstrate the powers of AngularJS filters. Here we select every element from the array provided and transform each element of that array into uppercase.
Thankfully AngularJS has already defined the uppercase filter and included it as standard so we can simply do the following:
AppController.js
var myApp = angular.module("myApp", []);
myApp.controller("AppController", [
"$scope",
function($scope) {
$scope.testVariable = "hello world!";
}
]);
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Google Search Like Functionality</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="AppController">
{{ testVariable | uppercase }}
<script src="AppController.js"></script>
</body>
</html>
Defining your Own Filters
Defining your own filters is relatively simple, here we’ll modify our existing AppController.js file to the following:
AppController.js
var myApp = angular.module("myApp", []);
// Register our filter within our application
myApp.filter("ourFilter", function() {
// our filter returns a function which will be performed on every expression it's bound to.
return function(input) {
// we define what we are going to return
var output;
// we transform our input to upper case
output = input.toUpperCase();
// we return the results.
return output;
};
});
myApp.controller("AppController", [
"$scope",
function($scope) {
$scope.testVariable = "hello world!";
}
]);
Index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Google Search Like Functionality</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-controller="AppController">
{{ testVariable | ourFilter }}
<script src="AppController.js"></script>
</body>
</html>