ng-repeat and $index, $event, $log

John Lindquist: $index is a way for you to show which iteration of a loop you're in. So, we'll set up an ngRepeat, kind of hack together a phrase like, "Item in some words split." Then we can just show all the items here.

You can see over there, we're listing some words as the characters. Then to show the $index, we simply just say, "$index," and I'll put a period there just for organization's sake. You can see, we loop through all the items, show the number, and then the item next to it. If you want to be one-based instead of zero-based, you can just add one. That's easy enough.

Let's add a class here, as we're going to be clicking on this. Let's add a class of button. Since we're going to be clicking on this and we want to see what the event is, we're going to click on it. You can say, "ngClick," and it's the $event which allows us to access this. We'll say EV equals $event, and then we can display the EV. We'll just say, "Page x."

When I click on it, it will show us the x value of wherever I click the mouse there. I can get any of the properties like the target, page x, page y and all that stuff, off of that event. Or if I want to log it out to the console without setting up a controller, one way you can do that is by using a $log.

If I say "app run," and then pass in a function -- we pass in the root scope and $log. We're going to say "root scope is log," then we'll have access to that log anywhere inside of HTML, and we can say, "log debug $event." If we open up the log here and click, you can see I get the mouse event. I can inspect anything that's in there. Or you can also instead of saying "$log," you can just assign any function off a controller, that you expose through the controller.

Lastly, you're probably wondering, how do I turn off the debugging for the logger? You just use the config. You say, "logProvider," and then "logProvider.debug.enabled.false." Now, if we refresh over here, you can see if I click, nothing happens. On the other hand, if you do "info," because there's different log levels, it's still going to show it. Or "warn," it will still show it, and sees a warning icon.

There's info, warn, error. Debug enabled is only going to turn the debugging off, so make sure you use the proper log levels when you're doing this logging.

That's what Index or $index is. That's what this Event is. You can just use $event and then you can pass that into whatever function you want. In a controller, it would be any...If I were to do "app controller," through scope and say, "my funk." You could just say "EV" and it would pass in the event into there, if you had passed in the "my funk event." That's what that would look like if you were to do it that way.

The log in is simply, I just attach it to the root scope. You usually don't use the root scope for anything really, but log in is a fairly global feature so I would attach it to the root scope and then use debug if it's something you want to be able to turn off. Or, use the different error levels for the different warnings and errors and such.

There you go.