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.3 ng-click

This video covers responding to a user’s click with the ng-click directive to add and remove people from our list, and then exploring the special variables that Angular provides us access to within the ng-repeat directive.

3.3 ng-click

In the last video we learned about AngularJS ngRepeat directive. In this video, we're gonna take a look at the ngClick directive. And how we can use events to create some really powerful interfaces using Angular. So I have exactly the same code that I had from in the ngRepeat example here in front of me. But I'm going to add the functionality to add a person to this list from on the page. To do this, we're going to need some inputs that are our new name and our new age, and then a button that we can click that will add the person to the list. [BLANK AUDIO] So I'm gonna create that now. I'm gonna create it inside the scope of our original list controller. You may have noticed on the last example, that the search model was actually outside the scope of our list controller. But we could still access the inside. That's because angular has the concept of a global scope, which is what we've seen in the earlier examples, where we didn't have any controllers. The search model is on what's called the root scope. And because the root scope is a parent of the list controller scope, we could get at the search model from inside the list controller. But this time, I am gonna create the new functionality inside the list controller scope. So I'll first create a label, that will be for the name input, and then an input which with the model of new name. Then, I'll add a break and then duplicate this, so we can create another model. This will be for the H, and I'm gonna change the type of the input to be a number. This just adds a little bit user interface is used for, and then update this to be the new age. So now, we have two new models in the ng-controller scope, the list controller scope, new name and new age. Lastly, we're gonna need another break. And then, the button that will do the adding. [BLANK AUDIO] So I guess what we want to happen is for me to be able to put in a name here, and an age. Then click add and then it add it to the list and creates these fields. To do that, we'll need to listen for clicks on the Add button. Angular provides us with an ngClick directive that lets us do just this. A bit like in the ngModel directive, angular evaluates the contents of the ngClick directive against the scope, and carries out whatever JavaScript is contained in there. So I'm going to write add in there and call it like a function. And it doesn't exist as a function or scope, but we can create it now. So I'll say scope.add is a function, which means we can call it from anywhere inside our scope, and carry out an action. In the case when she click it knows all it needs to do is call it, and let us do the rest. So the next thing I need to do is add the new person to the list of people. So I'm going to push a new object into the scope.people array. The name will be the new name taken from the scope, new name. And the age will be again the scope new age. These variables will have been set when we've typed in here. And finally, I'm gonna clear these variables after we've used them. So I'm gonna set new name to an empty string, and the same with the new age. So let's try out. I'll add a new person, let's say they're called Max, and give them an age of 10. When I click Add, you can see that Max is added to our list, and the Name and Age fields are cleared. Let's add Laura, she is 25 and Add. See Laura's added to the list. We can search these, because angular will search the updated list, Max and Laura. So that gives you an idea of what is ngClick can do. You can put some JavaScript in here and it will evaluate it against the scope. So in this case, I'm running a function. Interestingly, I could actually put the resetting of the variables, into the ngClick attribute. So I'll say new name, and set it to empty string, and new age, and also set it to an empty string, right here in the ngClick directive. As I said, it's just JavaScript evaluated against the scope in which it sits, in this case the ngController list. If I remove the resetting that we're doing inside the controller, and add a new person. Say, Laura, 25, Add. You can see the variables are cleared, and Laura's added to the list. I'm gonna set these back the way they were for the moment. So that's all well and good, but what about passing parameters to these functions? Well to do this I'm gonna show you how we would remove a person from this list. And to do that, I'm just gonna add one thing to our list, a button with an x in it. Inside ngRepeat, angular introduces a couple of new variables that you can use to work out what item you're operating on. One of these is the dollar index variable, that tells us the index in the array that we're currently operating on. So I'll add an ngClick directive to the button and then call remove, which will be function that will add to the scope, and parse it the index of the item we're currently operating on. So for each of these, in this case, it would be index zero, one, two, three, four. Now, I'm gonna add this function to the scope. So scope remove is a function. [BLANK AUDIO] And it's gonna get past that index parameter. Then, we'll use the splice method, the erase splice method to remove that person from the people array. So I'll say people.splice from the index one user. One person. So now, I should be able to just click this button and it will remove people from the list. So it does. I can add someone back. Let's add Laura again, 25, and then remove her again. And you can see you can completely clear the list, and add people back again. I'll just refresh that page, so we get the people back. Angular provides some other variables that we can use inside ngRepeat. So in this case, I'm gonna add a couple of messages to our list that will demonstrate these. The first one is $first, so I'm gonna add a span that says First! To each of these. But, we only want this to appear on the actual first item on the list. So I'm gonna say ngShow, and only when we're on the first item in the array. And you can see it first appears next to Tom, who's the first one on the list. I'm gonna duplicate this, and use another one, which is last. So I'll say last, currently appearing one the last, but we swap out this for, dollar last, and now it's only gonna appear on the last. There's another one, which is dollar middle, which will appear on any of the middle items in the array, which in this case is everything in between our first and last. So you can see angular has provided a few variables we can do some interesting things with data appearing on each item in the list. You could use this, for example, to style your elements. So I'll show you how we might do that. I'm gonna add a class to our button, and I'm gonna say, First dash, and then use the templating variable that I can use inside the class as well as just text, and first. This means this button now has a class of first-true. And you can see that here. First-true. Now, in my CSS, I can say we're gonna style first-true. And give it a background [BLANK AUDIO] color red. So now, we're styling something in the first item in the array according to a variable Angular is providing to us inside ngRepeat. Another thing, we might want to do is find the length of the people array. As the template and variables use JavaScript, we can use the JavaScript language property to show the length. So I'll add a new span here. Say there are {(people.length)} [BLANK AUDIO] in the list. Or just add the word people. There are five people in the list. And if I add Laura again and her age, then we can see it updates, so there are six people. And you'll also notice that our First and Last updated. If I delete Tom, then Jeffrey becomes the First. If I delete Jeffrey, Dan becomes the First. And if I remove Laura, then Peter becomes the Last. And if I remove Peter, then we only have the First and Last. And I remove David, and you'll see that Dan gets First and Last. And we get one people in the list. So that's an introduction to ngClick calling functions in your scope, like add and remove, and passing them parameters, like the index of the item we're operating on. And also some of the variables that Angular provides to us inside the ngRepeat directive. In the next video, we're going to look at monitoring for changes in models using the ngChange directive.

Back to the top