Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



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

4:48 Angular 1.x lesson by

AngularJS 1.2.x Does Not Allow Duplicate Keys in Repeaters

This lesson was recorded using an older version of AngularJS. With AngularJS 1.2.x, there are some breaking changes that you should be aware of:

<div ng-repeat="value in [4, 4]"></div>

In AngularJS 1.2.x, the above code results in an error. To fix this, you must use the track by syntax:

<div ng-repeat="value in [4, 4] track by $index"></div>

This change causes the repeated items to be tracked by their index instead of their value. Scroll down to view the full corrected code for this lesson.

$index and $event are handy shortcuts that allow you to access useful information directly in your views. $log facilitates configurable logging without using console.log directly.

Get the Code Now
click to level up

AngularJS 1.2.x Does Not Allow Duplicate Keys in Repeaters

This lesson was recorded using an older version of AngularJS. With AngularJS 1.2.x, there are some breaking changes that you should be aware of:

<div ng-repeat="value in [4, 4]"></div>

In AngularJS 1.2.x, the above code results in an error. To fix this, you must use the track by syntax:

<div ng-repeat="value in [4, 4] track by $index"></div>

This change causes the repeated items to be tracked by their index instead of their value. Scroll down to view the full corrected code for this lesson.

egghead.io comment guidelines

Avatar
egghead.io

$index and $event are handy shortcuts that allow you to access useful information directly in your views. $log facilitates configurable logging without using console.log directly.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?