Use ngInit to Track $index in Nested ngRepeats

Recently some colleagues of mine were trying to do some conditional logic on an input element buried away in a couple of ngRepeats based on the index of the first ngRepeat. They were getting into a pickle using $scope.$parent.$parent.$index. When they were printing out the $index it was giving them the answer they wanted, but then didn't behave in the same way when used within their logic on the input element. It turned out that this input was one $parent further away and they querying the wrong scope. This is the time to use ngInit.

Use ngClassEven and ngClassOdd to Lists with Alternate Row Styling

At some point or another you'll have had a list or table that has been created programatically and requires alternate row/item styling. Prior to CSS3's nth-child() the only way to do this was to create separate classes for the alternate rows. Even when we did get nth-child(), not many of us had the luxury of being able to use this as we were still constrained by older browsers (IE I'm looking at you) and so couldn't use it anyway. I remember many a time creating a C# variable called cssClass that would be assigned to every other row based on a modulus calculation of the dataset's row's index that I may or may not have had to create another variable for. Thankfully AngularJs has now removed this pain from our development by creating this pair of directives for use within ngRepeats.

Create a List Using ng-repeat

I can't think of a single site that I've been involved in writing that hasn't had a list. They are an integral part of most sites; from navigation to product listings, every site contains at least one list. Whilst working on my current commercial product I've had to write multiple lists that contain identical datasets, supplied from a back end service to be displayed in a repetitive fashion. The best way to tackle this using AngularJs is to obtain some JSON from your endpoint and use ng-repeat to create each list item.