Nice ngClass tip

This is a useful thing I found while working on a Angular project, making a small note here in case I come across the need for something like this again.

I’m working on a project where I have to loop through a list of items and display them in a table. Pretty straight forward stuff. One requirement is that if a row contains an item with a certain name, then a Class needs to be added to this row so the front-end developer can style this row differently.

After doing some research into this I found out that using ngClass this is really easy to do.

Using ngRepeat I looped through the data creating the table, then on each row using ngClass you can check the matching value like this:

Ng-class=“{‘className’: value === ‘titleToMatch’}

What’s happening here is if the value matches the titleToMatch then the className is applied to the row.

Ng-class is really flexibile and it’s well worth looking into what you can do with it.

Directives in Angular

As part of my reading up on Angular, I’ve spent a bit of time looking at directives. These are my notes from what I’ve found out, mainly this post is for my own benefit.

– Four ways to clarify a directive

– Element =

– Attribute =

– Class =

– Comment = <!—directive:person —>

The restrict attribute in a directive will set what the directive can be loaded as

– E = Element

– A = Attribute

– C = Class

– M = Comment – These were setup as a way to get around the problem in early versions of Angular where the browser restricted how many directives could be created

Replace:true means that the template in a directive will replace the HTML element of the directive. So if a directive called contains a element with two input boxes for first name and last name. When the output HTML source is viewed the tag is replaced by the input fields.

Directives that manipulate the DOM usually use the link option to register DOM listeners as well as updating the DOM:

– The link function contains functions that effect the DOM

– Functions that can run against the $scope

– The link function takes in 3 scope, element, attr

– Link functions should have a $destroy event to clear up directives

Isolated scopes are defined in a Directive as scope: ‘=‘. An isolated scope is an object that is specific to that instance of a directive. So for example if you have a directive that has a template containing two input boxes that will show a list of users first names and last names. This directive allows the user to edit the names in a list. So each directive have access to its own scope and they aren’t all using the same scope object. You create an isolated scope so each version of the directive has it’s own scope.

All this information I found on the AngularJS site in the Developer Guide a great resource.