Understanding Filters in Ionic

Understanding Filters in Ionic

posted in: Uncategorized | 3

In Angular, a filter is an entity whose sole purpose is to use a function to transform a given value or set of values. Applied to an array, a filter will be run once for each element in the array.

In this article, we’ll look at filters and how to use them in an Ionic app.

Basic Filters Syntax

The basic syntax of a filter is as follows:

.filter('myFilter', function() {
	return function(value, arg1, arg2){
		return value;
	}
});

In the above example, myFilter is the name you will call your filter with in a template. The returned function will be used to process each item that is passed in. arg1 and arg2 are arguments optionally passed in. You can have as many arguments as you need or none at all. The inline syntax would look like the following:

value | myFilter:args1:args2

Example: Hello World

Lets look at a really simple example. Let’s create a filter where given a name, it outputs “Hello _____!” with the passed in name.

.filter('helloWorld', function() {
	return function(value) {
		return "Hello " + value + "!";
	}
});

Here we are expecting to have a string passed into value. Let’s look at the controller:

.controller('MyPage', function($scope){
	$scope.name = "Andrew";
});

And finally the template:

{{name | helloWorld}}

In this example, we will be passing in

Andrew

into the filter and the output will be:

Hello Andrew!

Example: addInt

Let’s look at another example. Let’s create a filter where given an integer or an array of integers, it will add another given integer to each value.

.filter('addInt', function() {
	return function(value, number) {
		return value + number;
	}
});

Here, we are expecting that we will have an integer passed into value and another integer passed into number. Let’s look at the controller:

.controller('MyPage', function($scope){
	$scope.myIntArray = [1,3,7,15,31];
	$scope.mySingleInt = 40;
	$scope.incrementor = 1;
});

And finally the template:

The meaning of life: {{mySingleInt | addInt:2}}

<ul>
<li ng-repeat="myInt in myIntArray">
{{myInt | addInt:incrementor}}
</li>
</ul>

In this example, we are passing 2 to the first call to the filter (therefore adding 40 + 2) and passing 1 to the second call to the filter resulting in adding 1 to each item in the array. The output of the above would be:

The meaning of life: 42

<ul>
	<li>2</li>
	<li>4</li>
	<li>8</li>
	<li>16</li>
	<li>32</li>
</ul>

Example: Hello 42!

In this last example, we will chain two of our filters together. What this means is the value will be run through the first filter, and then the value returned from that filter will be passed to the second filter, and so forth. We are going to chain our addInt filter with our helloWorld filter.

To chain a filter, simply add another | and the name of the filter.

The meaning of life: {{40 | addInt:2 | helloWorld}}

The output of the above would be:

The meaning of life: Hello 42!

Conclusion

Filters are a great way to process a given value or set of values in your app on the fly. Questions? Leave them in the comments below!

Special Thanks

Huge thanks to Brandy Carney for reviewing/editing this post!

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

3 Responses

  1. cfjedimaster

    Ok, so I feel like this is a very picky response, and normally I’d send email to keep it between us as it is a bit OT, but I kinda figured others may enjoy commenting on my response too. No offense is meant of course. 🙂

    With that out of the way – don’t you feel like you’re misleading folks a bit when you say that this is how you do “Filters in Ionic”? Isn’t this really an AngularJS feature? And I get that for some folks, maybe a majority (and that would be an interesting discussion too) that Ionic == Angular, but it really isn’t, and it seems like those of us who know better should really be sure to call out things that Ionic does on top of Angular vs what Angular provides for us out of the box. As much as I use Ionic now, every now and then I’ll use Angular w/o it, so it isn’t like it is inconceivable that a person will do so, and it seems like it would be better to make it clear what one does vs the other.

    I’m not saying to change the title – I think it works – but I do think the text should be clear, from the beginning, that this is an Angular feature, not Ionic.

    • Hey Raymond,

      Thanks so much for your feedback. Greatly appreciated. 🙂

      The original wording was written that way because I tend to focus my writing on the mindset of writing an Ionic app to keep things simple VS differentiating between what is Ionic and what is Angular. My intended audience is typically people just getting started with Ionic so I try to keep things as simple as possible.

      That being said, I agree I should have made it more clear that it is an Angular feature. I have updated the wording of the first and second paragraph slightly to hopefully be more clear.

  2. cfjedimaster

    Cool, and LGTM. 🙂

Leave a Reply