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 :

...&         


        

Answer 1

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 2

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 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

Here's how you can pass expression with filter:

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

Answer 5

like this example below :

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