What angularjs expression syntax is this in ng-class

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?

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>

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  |

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.

Here's how you can pass expression with filter:

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

like this example below :

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