angular.module.ng.$compileProvider.directive.ng-class

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

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/);
  });