Built-in Filters

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

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.

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.

Roman Ganchenko
Roman Ganchenko
~ 10 years ago

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

Tre' Codez
Tre' Codez
~ 10 years ago

Reminds me of sql and functional programming. Me likey.

Markdown supported.
Become a member to join the discussionEnroll Today