[SOUND] No framework on the level of AngularJS would be complete without some sort of construct to loop over our data, and output the result of that looping to the web page. AngularJS certainly has that construct, and it's it's called ng-repeat. And that's what we're going to learn about in this lecture. Now we've seen directives before. For example, ng-app is a directive while ng-controller is a directive, ng-repeat is yet again a directive that we're going to learn about, a directive that comes packaged together with AngularJS out of the box. Right now I'm in my editor and I'm in Lecture 17 inside a Full Stack-Course 5 Examples folder. So let's go over this little shopping list app. We have the ng-app meaning the app being shopping list App and we have the Shopping List controller, where all the magic is going to happen. Let's switch to app.js for a second and take a look as to what we have here. What we have here is two arrays. The first one is called shoppingList1 and it has one, two, three, four, five, six, seven, eight, eight items in the shopping list. And they're all just strings. And we also have shoppingList2, which has also elements in it, but the elements of shoppingList2 are actually objects. So, it's one, two, three, four objects. Each object has a name and a quantity property. When we declare our module and actually declare our Shopping List Controller, all we're doing here is obviously injecting scope as usual, but all we're doing here is placing those arrays as a property on the scope service. So, now we have a shoppingList1 property and we have a shoppingList2 property that is now able to be a reference inside of our html template. Let's go back to index.html. And we see here the first shopping list, or the first version of a shopping list here, is that we have an unordered list and the LI tag has an attribute called ng-repeat. And ng-repeat is very similar to a four each type of four loop so the construct of item in shoppingList1 means that we're going to be looping over shoppingList1 array or collection one array, and each time through duration the item of that collection that is being iterated over, is going to be equal to the item variable that we're setting up. And in this case, right now, we're just interpreting that item as the value of the body of the LI tag. So each time as it's iterating, it's going to output another item that is equal to one of the items in the shoppingList1 array. The rest of the code so far is just commented out and we'll get to it in a second. So, let's go ahead to our browser and take a look here. And you see here that we have our Shopping List and all of our eight items output to the browser. Let's go ahead and right-click on this Milk item and inspect it and see what the code in HTML is actually looking like. As you can see here, what we have here is the entry repeat actually repeated the LI tag eight times over and over here. Each time interpolating the item in the ray as the contents of that particular LIM so in this case it's milk, in this case it's donuts, cookies and so on and so forth. Let's close that up. And go back to our code editor. And I'll comment a different shopping list, we'll just go ahead and comment this out for now, and open the comments out for this one. In this case, we're also looping through the array, except in this case, we are looping through shoppingList2 array. But shoppingList2, as you can remember, let's go back to app.JS, you see shoppingList2 is a list of objects, not just a list of strings. So in this case, each item in the loop of shoppingList2 is going to represent the object, not just the particular string. So in this case, when we interpolate it, and we say something like Buy, Item.quantity of item.name, we're able to traverse the JavaScript object in its usual way using the dot notation. And obviously interpolated with double curly braces, so if we save that and go back to our browser, you'll see that now we're outputting Buy 2 of Milk(s). That's really not English but it's close enough, Buy 200 of Donuts(s) and donuts is spelled twice with an s. Again kind of of a little bit messed up here, but it doesn't really matter, you get the idea. And Buy 300 of Cookies, and obviously we're going to have a cookie party right there. Let's go back to the code editor and now comment this out and uncomment another way of traversing the shopping list. In this case, what we're doing here is, we're doing exactly the same thing, except this time around, I'd like to be able to number them one by one. Even though we're inside of an unordered list, I want to be able to get at the index of the iteration as we go along. So item in shoppingList2, the ng-repeat is set up exactly the same. Except ng-repeat directive allows us to access the looping index variable by exposing it to the body of the tag that ng-repeat is an attribute of by the dollar sign index. So if we say dollar sign index and we try to interpolate that inside of the body of the tag that ng-repeat is on, it will give us the index or the iteration number through the loop of this collection shoppingList2. So we are able to say index $index+1 because obviously arrays are zero-based and we don't want to start Counting to the user from zero so we're going to do plus 1. So the very first item will be 1, 2 and so on and then we'll say the same thing by item.quantity of item.name. Let's save that and go to the browser and you see now, every bullet now has 1, 2, 3 and 4 and these numbers came from $index that is exposed by the ng-repeat directive. Now obviously, if we go look at our html, you see that we're setting up watchers for different items inside of our array that we'll looping over because double curly braces as we learned before, sets up watchers, which means that if we change things inside of the array, the changes should appear on the screen automatically. And this actually includes even if you're setting up a watch to yourself for a pretty deep value inside of the array. Let's go ahead and create an input element, with an ng-model that is going to watch, as I remember ng-model sets up a watch, is going to watch a shoppingList2 but not just a whole thing. We just want to watch the first item in it and we want to watch the quantity of that first item. Which means that the value inside the input element is going to directive reflect the quantitative value of the first item in the list. Let's save that and let's go back to the browser. And you see here it's already appearing as 2, and the reason it's appearing as 2 is because that's the first item on the list. So if I add a 0 right here, you'll see that the list automatically updates without me doing anything else. So I could add whatever really I want in here, and the list will update with that particular number. We can also update the entire list by removing or adding items to the list. Ng-repeat also watches the entire collection as the whole, and will then re-render the view with the updated data. So let's go ahead and do that right now. We'll put an input field here, and we'll say it's ng-model is equal to new item name. And we'll put even a placeholder, so people know what that is. Item name and we'll put another input. And this time the ng-model is going to be new item quantity. And the placeholder, we'll say as item quantity. Okay, let's close up the sidebar so we could fit it a little bit better. And one more thing is we'll add the button to be able actually to add that new item to the list. And we'll bind an ng-click and we'll bind it to some function called add to list. We'll put the parens at the end and we'll say add to list as the label for the button. Now what we need to do is we need to actually go ahead and implement this add to list function. We'll copy that. Goto app.js, let's scroll into our controller and we'll say $scope.addToList is a function, we don't need the name and inside that function, we'll need to create a new item and then new item is going to be equal to an object, as we know that's objects now, the name of which is going to be scope.newItemName, and quantity is going to be of scope.newItemQuantity. And you could see these are the values that we pulled out from the newly created engine model, right? The engine model that we've set up here created newItemQuantity and it created newItemName. So we're able to now reference it right here. So once we created that new item, we need to now place it onto our array. Our array is called scope.shoppingList2. So we'll do that. Scope.shoppingList2.push and we'll just say (new item). Okay, let's save that. Let's go back to our browser. As you can see here we have a couple of textboxes and add to list. So let's say rich cookie and we'll get like 500 of them and let's get add to list. And you can see 5, number 5 now is Buy 500 of Rich Cookie(s). Now actually spelled properly too. So now that we have lots of food, let's do Coursera course and let's order three of those. And now we have buy three Coursera courses. You don't have to buy them, they're free. And even though we've changed this whole list we can still affect the first deep value which is the quantity of this first item which is milk. So we can still say 200 more and more and so on. So we can still watch that item and it will get automatically updated by the watchers that were set up by AngularJS through the ng-repeat directive. So to summarize, we learned about the ng-repeat. And ng-repeat is a directive that extends the functionality of HTML elements it's applied to. And if you think carefully about it that's an incredible idea that you were able to take a regular HTML and actually extend the way it behaves and AngularJS achieves just that. Ng-repeat behaves very similarly to for-each construct in other languages. The way it works is, ng-repeat is an attribute on some element, and then you specify some item, which is a variable, in some collection, and collection should be some kind of a property. Usually the scope service and each item can now be used in interpolation as an item in the collection at a particular index of iteration. Now ng-repeat also exposes a special $index property to the body of its host tag. And what it does, is that $index holds the numeric index of the current item in the loop. And you're able to then use it in your interpolation or in some calculations inside of the HTML template.
