FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Filters

Let’s have a tour of the built-in Angular filters, and discuss how to use them.

5.3 Filters

So now I'm gonna take you through a few filters that Angular makes available to us. We've already seen a filter used in the ng-repeat Directive, to allow us to search through the array that we're repeating over to find specific items. But there are other filters for doing things like formatting numbers, strings, and dates. I'm gonna take you through a range of them now. In the next video, we're gonna create our own. I'm gonna show you a range of filters across a range of data. I set up all my data in this controller down here and displayed it all out on the page here. I'm gonna use a different filter on each and show you exactly what they do. All filters are applied with the pipe symbol, so any time you see that, you know filters happening. The first one I'll show you is currency. I'm gonna use it on the price model I've got here, and you can see that as soon as I finish typing in currency, the Angular has formatted the price data correctly, so that it comes out as a currency. I can also change the symbol that we're using. So I'm going to use the pound sterling symbol, which is local to me. But we can also use the euro symbol, this also that shows you that we can, essentially, pass filters arguments. So you can imagine, this as almost being like passing currency an argument, except the syntax for doing this in Angular is with carry on. Next, we're going to use the number filter to reduce the number of decimal places on a number. So you can see, I've applied the number filter and immediately it's reduced this down to three decimal places. But you can supply your own number. So if I add one, it gives me one decimal place. If I say two, it gives me two decimal places. Three, four, five, six and so on. Next I'm gonna use some string filters, like uppercase. This transforms the string into uppercase, and there's also a lowercase filter. The date filter is very useful for transforming a normal JavaScript date into something more specific, so you can see straight away that it's converted into Jan 20, 2013, which is today's date. Instead of the horrible looking date stream that we get from the JavaScript date object by default. So let the date filter back again. But we can also specify how we want this to look. So I'll add the year four times and then the month and the day. And there's a whole range of options that you can use, that you can find documented on the Angular website. So I can format it nicely like this. And that's a really useful filter, if you're ever using dates in Angular. There's also a whole other range of letters and combinations that you can use as well as some built-in types. Next I'm gonna show you the limit two filter. This is another one that applies to ng-repeat, and it lets us limit the number of items that come out of the repeat, so I'm gonna use the filter in the ng-repeat directive and say, limit to two. And now you can see, we only have two names from the array of names which has actually got four in it, if I increase this to four, and we see you get all four. And let's add a new name. Let's say Joe. You can see he doesn't appear because we've limited it to four. If I add five we get Joe. I'll limit this down to three for the time being. The last one I'm gonna show you is the order by filter. Order by filter can be used to sort by property on an object. So here we're iterating through an array of two people. I'll just add another one, to make it easier to see what's going on. So the first name will be Joe. And last name will be blogs. So add the order by filter to our ng-repeat directive, order by. And then specify the property that we want to sort on, which will be the last name. You can see I've put this in a string. But immediately, it sorted a b and w which is the correct order. We can reverse it by adding another colon and saying true. And now we have them in the reverse order. We can also sort by first name. So far, I removed the reverse parameter and then sort by first name. Then we have a complete different order where Jeffrey is first and I'm last. And we can again reverse this. So that's a quick tour through Angulars filters. In the next video, we're going to be creating our own.

Back to the top