7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Creating a Filter

In this lesson, we’ll use the module filter syntax to build a clean filter that takes a separator parameter.

6.1 Creating a Filter

So now we're gonna build our own Angular filter. We're gonna use the Angular modular syntax as well. So I'll set up a module down here, angular.module and call it myapp. And then include the dependencies in brackets, but we don't have any at the moment. Then I'll add the myapp to the ng out directive on the HTML tag, so I say myapp, myapp. And then add the filter controller that you can see I've referenced here. And set that up as function. And it's going to take scope as a parameter, and then close off the brackets. Filter we're going to write will be a clean filter. It's gonna remove all the punctuation, and spaces, and lowercase from some text. So I'm just gonna create a template for the text to go in. And then we'll define the text and then create the filter. So in the scope I'm gonna create a model called text. And we'll put in some gibberish like hello world. Maybe not quite gibberish but just some text. Hello world, this is some text! So how do we make a filter? Well, it's quite similar to how we create a controller actually. We use the same .syntax. So I'll just say .filter, and give it a name. We'll call it clean, and it's also a function. This isn't quite the filter yet. We have to return something from this function. So I'll return another function. Now Angular knows that this is a filter, and so we can start using this in here. It won't do anything at the moment. In fact, the text will just disappear. Angular will pass us in our filter function, which is this inner function, the text that we've supplied to the filter in our template. So here I'll say we're passing the input parameter, and I'll just return the input. And now you'll see that the text is now appearing on the page again. This is because we've just taken the input in and returned it back out again. Angular is just hunting us the input which is this text, and we're just sending it straight back through again. To show you that we're now doing something, if I say tolowercase then you can see that all our text is now in lower case. And this is the first thing we actually need to do in the filter. Next we're going to remove all the spaces and convert them to hyphens, so I will on a new line, just for nice formatting say, replace. And we're gonna replace any spaces, one or more spaces, and we need this to be a global replace. And then replace that with hyphens. So now I've replaced all our spaces with hyphens. And on the next line, we got another replace, which will be another regular expression. This one is slightly more complicated, but we've seen it before in another video. But this time we're gonna replace all the punctuation with nothing. Instead of selecting just punctuation, I'm gonna basically select the inverse. I'm gonna say we don't want to select anything with this a to zed or zero to nine, and I'm gonna make this case sensitive as well. We don't actually need it at the moment because we've already done two lower-case, but we might in the future. And we also don't wanna replace hyphens. So now you can see, we have hello-world-this-is-un-text, which is what we wanted. All we're doing here is defining a filter using our .syntax, .filterclean, and we give it a name. Then we provide a function, and from that function we return another function that's our actual filter. The reason this is created in two functions is that our filter may have some dependencies and we have to request these using the outer function. For example, we might have a dependency on another filter. So let's see how we add a parameter to our filter. In this case, I wanna supply the separator, so I might not always want to use dashes. In this case, I'm just gonna use spaces. So now Angular passes us the parameters that are given to us from the template in the rest of the arguments on the inner function. So in this case, I'm gonna call my argument separator. We may not always get passed the separator. So let's use the or operator to make sure that we either have a separator or the dashes. Separator or dashes. And I'll put these in brackets, so it's clear what's going on. But you can see a problem here because separator is a space. But we're removing everything except a to zed, zero to 9, and dashes. So we need to modify this regular expression. Now this is where things get a little bit more complicated, but they're still okay. All right, I'll create a new, regular expression, and we'll call this filter. And we use new reg xp, so we're creating a new, regular expression object. And we give it a string, so in this case I'm gonna give it this string. But we remove the slashes from the end. Then we also need to give it the flags, so that's i and g. And then we include it here again, filter. I seem to have a problem here already. I'll just check the Inspector, see what's going on. I guess I'll close out the search. It's reg XP. So as you can see we still have the same problem because we haven't included the separator here. What we need to do is say we either want the separator or the dash to be the last character that we remove. So I'll do that like that. And you can see that it's immediately working. That's because we've already passed the clean filter a space. If I sort this or remove that parameter completely, you can see we're now using dashes again. And if I pass it a different argument, let's say the plus, then we're now separating everything with plusses. So that's it. We've created our own filter. We used the .syntax, gave it a name, and supplied a function which returned an inner function that's our actual filter. It accepts as arguments the input to the filter which is this text here. Basically what's on the left of the pipe, and any arguments that we supply inside the template. Then, we can just return the string that we filtered, and that's about all there is. It's really easy to create filters, and they're a really useful part of Angular. In the next video, we're going to take a look at directives, and then create one of those for ourselves.

Back to the top