Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!

Existing egghead members will not see this. Sign in.

Extract predicate methods into filters for ng-if and ng-show

3:09 Angular 1.x lesson by

Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show

Get the Code Now
click to level up

egghead.io comment guidelines


Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show


Good Job, a good filter example :-) !

Compared to your previous lesson about caching, does angular caches filters that accept arguments.?

I was also wondering if it is possible to handle filter caching problems more cleanly using filter arguments?

In reply to egghead.io

I've not heard about angular builtin mechanism for cache. Do you have a source?

I think using a filter or a function should have the same effect in terms of performance. I tend to prefer filters for reusability.

If you use memoize provided by lodash/underscore, you have a cache depending on arguments. Not sure I'd advise this, because like always with caching, its tough to decide whenever you need to invalidate cached data.

In reply to Adrien

Ok, I think my question was not clear. It was related to your previous lesson about state-full filters.

I often need to implement filters that are initialized using promises. I currently use state-full filters but I would prefer using state-less filters for performance reason (because angular does caching for us).

I haven't found yet a clean way to do that. Do you have an idea?

In reply to Benjamin

Why do you say angular caches for you? Where did you read that?

What you describe was possible till angular 1.2.x see https://jsbin.com/lugiko/edit?html,js,output

but try to change the version in the js bin, it now fails (for optimization reasons). So stateful filters are the only way I know

In reply to Adrien

Say we have an app where content must be displayed based on user rights. Rights are an array within user and if it can contain admin or BMT. We have two divs, the admin div must be shown whenever the user is admin and the standard user div must be shown whenever the user isn't admin.

We already have our logic in our controller, so now we need to add it within our template and isn't admin rule for system non user divs. This does the trick, but we have a problem in this implementation which is our business logic is leaking within our controller and it's not reusable.

In order to solve this problem, I suggest we use a filter. This filter would be named "User" and it would return a function. Let's discuss all the details of this implementation. The filter would receive the user J subject and it would receive a rule. How would we use it? We would use it like that, main.currentuser, pipe to user filter and then the rule name.

Say we want to have is admin and we want to have isn't admin. Currently, our filter isn't implemented, so we have to create the appropriate rules. Let's create a J subject with is admin, which would be a function which takes a user. We already have the implementation here and the isn't admin which returns the opposite of our is admin function.

Then here, we have to return rules, rule name, and we pass the user. Here we go, we have a setup where we have our cool reusable and we can get rid of this code within our controller.

Joel's Head
Why are we asking?