angular.module.ng.$compileProvider.directive.ngClass

Description

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

as attribute
<ANY ng-class="{expression}">
   ...
</ANY>
as class
<ANY class="ng-class: {expression};">
   ...
</ANY>

Parameters

Example

 <input type="button" value="set" ng-click="myVar='ng-invalid'">
 <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').prop('className')).not().
      toMatch(/ng-invalid/);

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

    expect(element('.doc-example-live span').prop('className')).
      toMatch(/ng-invalid/);

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

    expect(element('.doc-example-live span').prop('className')).not().
      toMatch(/ng-invalid/);
  });