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 986 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.

Built-in Filters

2:13 Angular 1.x lesson by

AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

AngularJS comes with several handy filters that you can use out of the box. These filters can be combined to create more complex filtered results.

Get the Code Now
click to level up

AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

egghead.io comment guidelines

Avatar
egghead.io

AngularJS comes with several handy filters that you can use out of the box. These filters can be combined to create more complex filtered results.

Avatar
Ignacio

It's important to say that the order of the filters are relevant:
1) ng-repeat="actor in avengers.cast | orderBy:'character' | limitTo:5 | filter:searchText"
Here we are searching only in the 5 that we limit to.

2) ng-repeat="actor in avengers.cast | filter:searchText | orderBy:'character' | limitTo:5"
Here we search first in all the records then we order and filter them.

Am I correct?

In reply to egghead.io
Avatar
Joel

Absolutely correct. It's a "pipe" that passes results from left to right.

In reply to Ignacio
Avatar
Roman Ganchenko

I would like to know how did you configure your app in WebStorm so it's using LiveReload and JavaScript debugger from WebStorm

Avatar
Wayne

Reminds me of sql and functional programming. Me likey.

John Lindquist: Let's explore a few more filters provided by AngularJS. First one we're going to look at is called "order by," and we can order by the name. If I just refresh from here, you can see we're now sorting by Alexis and Chris, and Chris, and going down to Tom. These things are sorted alphabetically or ordered alphabetically. Put a "-" sign in front, this will sort them from the reverse order.

What else can we do here? We can do a "limit to," if we only want five results. You can see there are limits, the results set to only five. We can limit it to -5 would limit it to the last five results.

We can also start stacking these things. You can say, "order by," and we'll say order by name and then another pipe will stack the filters on top of each other. It's going to order by the name and limit to the last five, so we've got Samuel, Scarlet, Stellan. These are the last five on the list. Again, this would be the first five, so Alexis down to Coby, and then we can do the reverse order, limit it to five, et cetera.

We can take everything we have there, add another pipe and add that search filter back on. You can see now that we have searchable list of names ordered by name, limited to five and you can search on them now.

That's pretty awesome. There are also filters like lower case, if you just want to...lower case is a simple property like that. Upper case, if you just want to upper case, you can see, I already have these applied for Chris and for Steve.

That's how you stack filters and use a bunch of the filters that AngularJS already provides for you.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?