angular.directive.ng:class

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Description

The ng:class allows you to set CSS class on HTML element dynamically by databinding an expression that represents all classes to be added.

The directive won't add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then the classes new classes are added.

Usage

<ANY ng:class="expression">
   ...
</ANY>

Parameters

Example

 <input type="button" value="set" ng:click="myVar='ng-input-indicator-wait'">
 <input type="button" value="clear" ng:click="myVar=''">
 <br>
 <span ng:class="myVar">Sample Text &nbsp;&nbsp;&nbsp;&nbsp;</span>
  it('should check ng:class', function(){
    expect(element('.doc-example-live span').attr('className')).not().
      toMatch(/ng-input-indicator-wait/);

    using('.doc-example-live').element(':button:first').click();

    expect(element('.doc-example-live span').attr('className')).
      toMatch(/ng-input-indicator-wait/);

    using('.doc-example-live').element(':button:last').click();

    expect(element('.doc-example-live span').attr('className')).not().
      toMatch(/ng-input-indicator-wait/);
  });