Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    AngularJS 1.3: Controllers can no longer be global functions.

    Built-in Filters

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.