In my previous article I had described the AngularJs Data Binding & Controllers. You can read it from the following link:
If you have been using Angular for a while now, you might have felt the need to do similar things several times and sometimes in several controllers. In my early days, I had nothing much to do about it. I used to declare similar functions under the scope of multiple controllers, that were meant to do the same task, thus repeating the code. It never felt right, though.
Then I was introduced to the filters. Why don't I just walk this talk? Let's take an instance where we need to reverse a variable string. What I would earlier do, is declare a function under the scope of the controller. Something like:
- function oneCtrl($scope) {
- $scoep.message = “Shashank”;
- $scope.reversed = function (message) {
- return message.split(“”).reverse().join(“”);
- };
- }
And use it in HTML like:
- <div ng-controller=”oneCtrl”>
- <input type=”text” ng-model=”message”/>
- <h1> {{ reversed(message) }}</h1>
- </div>
Find this example working at: jsfiddle
But then, what is the use of AngularJS that boasts a code re-usability feature if I need to write this reversed() method in every controller? Reasonable doubt!
AngularJS has filters in store for this. What it suggests is something like this:
- myApp.filter(“reverse”, function() {
- return function(text) {
- return text.split(“”).reverse().join(“”);
- }
- });
And use it in your HTML like this:
- <div ng-controller=”oneCtrl”>
- <input type=”text” ng-model=”message”/>
- <h1> {{ rmessage | reverse }} </h1>
- </div>
Yes, this is the syntax for applying a filter. Using a pipe '|' followed by the name of the filter.
Find it working here: jsfiddle
AngularJS: ngFilter
Now that we have learned to create our custom filters, I should definitely not forget to mention about the predefined filters by Angular available for our use.
I'll use a big JSON object to present the data from, on which we'll apply the filters. This object will be returned by a service. For instance:
- myApp.factory(“Avengers”, function() {
- var Avengers = {};
- Avengers.cast = [
- {
- name: 'Robert Downey Jr.',
- character: 'Tony Stark / Iron Man'
- },
- .
- {
- name: 'Samuel L. Jackson',
- character: 'Nick Fury'
- }
- ];
- return Avengers;
- });
- function avenrgersCtrl($scope, Avengers) {
- $scope.avengers = Avengers;
- };
So having defined the avengers model from the service into our scope, let's move on to the HTML part.
- <body ng-app=”myApp”>
- <div ng-controller=”avengersCtrl”>
- <table>
- <tr ng-repeat=”actor in avengers.cast”>
- <td>{{ actor.name }}</td>
- <td>{{ actor.character }}</td>
- </tr>
- </table>
- </div>
- </body>
You may notice the ng-repeat attribute here, that is a very powerful one, it helps us to loop through every item of a list, or an object. Before we start filtering, let's see this example working: jsfiddle
Let's set up a searchbox now to filter the results of this object into the table. Just make these additions to the code inside the "avangersCtrl":
- <div ng-controller=”avengersCtrl”>
- <input type=”text” ng-model=”search” />
- <table>
- <tr ng-repeat=”actor in avengers.cast | filter: search”>
- <td>{{ actor.name }}</td>
- <td>{{ actor.character }}</td>
- </tr>
- </table>
- </div>
We are all set. This will definitely help you to filter results based on the keywords you type into the search box.
Additionally, to filter the results only by a specific key, like name or character only, just replace the model with:
- <input type=”text” ng-model=”search.name” />
And now the results will only be based on the names present in the list that match the keyword you type in. See the working example here: jsfiddle
Other Built-in filters
Angular provides us with certain built-in filters that can be of great use and several of them can be stacked up on the same list.
For Instance:
- <tr ng-repeat=”actor in avengers.cast | orderBy: 'name'” />
Will sort the result by name in ascending order. This order can be reversed by:
- <tr ng-repeat=”actor in avengers.cast | limitTo: 5” />
Will return only the first five results from the list. To get the last five results, just do:
- <tr ng-repeat=”actor in avengers.cast | limitTo: -5” />
Awesome right? Moreover,
- {{ actor.name | lowercase }}
will convert all the characters of this string to the lowercase, for uppercase, use:
- {{ actor.name | uppercase }
Previous Article:
AngularJS - Data Binding & Controllers : Part 4