angularjs - What angularjs expression syntax is this in ng-class

Question

The AngularJS Noob Handbook has some code which reduces class manipulation to a simple expression and binding :

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

However, what is the expression syntax in ng-class? I understand that a vertical bar (|) would pass through a filter and that a filter can be passed parameters after a colon but the above code is doing something different. If the scope variable on the right evaluates to true then the expression on the left is included otherwise it's dropped.

Is this specific to the ng-class directive? Is there some documentation on http://docs.angularjs.org that explains this?

Answer 1

This is mentioned briefly (too briefly, in my opinion) in the ngClass documentation. If you pass an object to ngClass, then it will apply each key of the object as a class to the element if that key's value is true. For example:

$scope.first = true
$scope.second = false
$scope.third = true

with

<div ng-class="{a: first, b: second, c: third}"></div>

would result in

<div class="a c"></div>

Answer 2

you've probably also seen something like this:

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

Very rad syntax.

EDIT: What happens here, is that the "complete" class is added to the element if(item.Id != 0). Alternatively, we could write: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]. As its decided by the monsterEatsCookies function, Elmo does not eat cookies so since this function returns false the html element gains a class called cookieless.

A simple example: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0 which is "false" -- the "DoubleNegative" class is added to the element.

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

`

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

Addendum

Also, I just realized that you can use a variety of different keys to map to your condition. For example:

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

The mute class will be applied if item has no "hasValue" property. Furthermore, you can apply a class for any given type or value:

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

In the following collection, this would embolden a person's name while hiding items that are objects:

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

With this, you could watch for specific values in any $scope property. I suppose this could come in very handy at times.

Cheers

Answer 3

ng-click="flags.open=!flags.open"

switch the value of the flags.open to true or false.
And

ng-class="{active:flags.open}"  

decides whether the class active is present or not based on the value of flags.open.
Please see the Fiddle demonstrating the above example.

Answer 4

like this example below :

div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")

Answer 5

Here's how you can pass expression with filter:

 <div ng-class="{ 'customer-page': ('customer' | isRoute), 
  'orders-page': ('orders' | isRoute)  }">....</div>