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

3.4 ng-change and ng-options

In this episode, we’ll use ng-change to listen for changes to a model and filter its value. We’ll also make use of ng-options to populate a select box to build a simple contact manager.

3.4 ng-change and ng-options

In the last video we looked at the ng click directive and the ng repeat directive. And some of the extra variables that Angular gives us access to inside that directive. Now we're going to take a look at the ng change directive and also ng options. The outcome is to show you these examples with the code on the left and the updating frame on the right. It's actually built in Angular. One of the things it does is I can change the name of this particular sketch by hitting Esc, and then typing in this field here. And you can see I'm updating the URL. I can't type punctuation in it, but I can type numbers, and any spaces are converted to hyphens when I type. I'm doing this using the ng change directive. ng change, like ng click, lets us react to an event that the user tripped, in this case changing a field or input. So in this example, I've replicated A sort of fake browser. We have a URL bar and we have a text box here that we're going to use to update the URL. The first thing we'd like to do is to be able to update the URL from this box. So we'll the use the ng-mode latch view and call the. Model path. Then we're going to use templating to add the path model into the value of the input. So now as I type in here you can see the url updates. But I can type punctuation and spaces and things that shouldn't be in url's. So how do we process that information so that it gets rid of spaces and punctuation? Well, we'll use the ng change directive. So I'll add ng change to the input that we want to listen for changes to. And like ng click, we pass it a function, so I'm gonna pass it the clean function. Then we need to add this clean function to our scope. So i'll say scope.clean is a function. And when we call it, we want to remove all the spaces from it and turn them to hyphens and then clear out all the punctuation. So I'll say scope.clean is equal to scope.clean.replace. And then I'm going to use a regular expression to match all the spaces and match multiple spaces too. And replace that with nothing, in fact a hyphen. And then we're going to replace all punctuation with nothing. Just completely remove them. I'm just gonna quickly reformat this, and then add the regular expression that we need. So, I think the regular expression will be, we've got a list of things. But we want to ignore these. So we're going to ignore a to z, 0 to 9. And hyphens. And this needs to be case insensitive and be a global match. And then we'll just completely remove it. So now, as I type, you can see it's updating. If I type a space, maybe this shouldn't be a global match. Let's just check. No, there's definitely something wrong here. Oh, I'm overwriting the wrong model here. So now we actually need to use path, not clean of course. So type in here, and that works fine, hello world. And you can see that my space is converted to a dash. And now if I try and type some punctuation, nothing will come out and basically everything is being cleaned up nicely. Lets just check that I can still type numbers, I can. So that's the basic usage of ng change it's quite a lot like ng click in that it runs a function except it runs it just every time an input changes. Now let's take a look at ng options, ng options is the directive that Angular provides for us for filling out a drop down or select box. It works a little bit like ng repeat in that you supply it with an array, and then it extracts data from that display in the slope box. We're gonna build a simple contact manager to show this off. The first thing I'll do is add this select to the page. And a fake option inside with no value just to show what we need to do. Choose a person. Now, we want to make the whatever is selected in the farthest select box. To be saved in a model so we're going to call that selected person. And then we'll use the ng repeat style syntax to extract people into the scope box. So I'll use ng options. We want to extract the person's name for each person in a list of people. I'll just quickly reformat this so we can see what's going on. Now we just need to correct this list of people on the scope. So I'll do scope.people as an array and then create a set of objects that will be our people. So name Tom Ashworth, and I'll save a number for myself too. I'll make my number 120. And we'll start another person. In this case we'll add Jeffery Wayne. And we'll give him a different number zero down to one. And a third person who we'll call Joe Blogs. And give them a different number 1230984756 now you can see that Angular has populated our select with these people, and if I add a template to the page, that shows us the selected person's name. I've selected person.name then you will see that when I choose a person, it shows the name that, of the person I have got selected. I first search Jeffery Way, it shows Jeffery Way there. Just like in the ng repeat directive we can filter these people according to another model, so I will add the filter here and say we are going to use the search model and then inside here again I'm going to add a new input that will be our search. I'll put it in a diff so it's on a new line and then input type is search. And the model will be search. You won't see any change straight away. We'll still have all three people but if I type J then now we only have Jeffrey and Joe in the list. So now let's add a way to modify the person. In a new dif I'll create a form that we can use to edit them. So we'll have a label and this will be then for their name. Then we'll create a new input. And make the model on it at the selected person's name. Then add a break and another label that will be a number, and we'll use the selected_person.number. Let's add a hr so we can see what's going on. Now when I choose a person you can see that my data and my number is loaded in here, and I can change my name to Tom Bloggs. And now I've got Tom Bloggs,Jeffrey Wey, and Joe Bloggs. If I had Joe Bloggs and used my surname as his, then in our list we have Joe Arthur, Ashworth, Jeffrey Way, and Tom Bloggs. And we can search on the number too. So if I change my name back again and then take a look at each of those numbers so we have 1,2,3 on this one. And we don't have 123 in this one, but we do have 123 in this one, so if I search for 123, then you see we get me and Joe. So that was a brief introduction to the ng change directive and the ng options directive, both of which will be pretty useful as you build apps with Angular.

Back to the top