This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    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.

    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss