knowhow-server/public/js/lib/angular-1.2.9/docs/partials/api/ng.directive:ngClass.html

A personal workflow engine that can manage and use any network connected host

<a href="http://github.com/angular/angular.js/tree/v1.2.9/src/ng/directive/ngClass.js#L65" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngClass.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngClass</code>
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngclass-page"><p>The <code>ngClass</code> directive allows you to dynamically set CSS classes on an HTML element by databinding
an expression that represents all classes to be added.</p>
<p>The directive won&#39;t add duplicate classes if a particular class was already set.</p>
<p>When the expression changes, the previously added classes are removed and only then the
new classes are added.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-class="{expression}"&gt;
   ...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-class: {expression};"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3 id="usage_animations">Animations</h3>
<div class="animations"><ul><li>add - happens just before the class is applied to the element</li><li>remove - happens just before the class is removed from the element</li></ul></div>
<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.<h4 id="usage_animations_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngClass</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngclass-page"><p><a href="guide/expression">Expression</a> to eval. The result
of the evaluation can be a string representing space delimited class
names, an array, or a map of class names to boolean values. In the case of a map, the
names of the properties whose values are truthy will be added as css classes to the
element.</p>
</div></td></tr></tbody></table></div>
<h2 id="example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngclass-page"><p>Example that demonstrates basic bindings via ngClass directive.
<h4 id="example_source">Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-61" source-edit-css="style.css-62" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-63" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-61" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-61">
    <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
    <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
    <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
    <input type="checkbox" ng-model="error"> error (apply "red" class)
    <hr>
    <p ng-class="style">Using String Syntax</p>
    <input type="text" ng-model="style" placeholder="Type: bold strike red">
    <hr>
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
  </script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-62"></pre>
<style type="text/css" id="style.css-62">
    .strike {
      text-decoration: line-through;
    }
    .bold {
        font-weight: bold;
    }
    .red {
        color: red;
    }
  </style>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-63"></pre>
<script type="text/ng-template" id="scenario.js-63">
    it('should let you toggle the class', function() {

      expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/bold/);
      expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/red/);

      input('important').check();
      expect(element('.doc-example-live p:first').prop('className')).toMatch(/bold/);

      input('error').check();
      expect(element('.doc-example-live p:first').prop('className')).toMatch(/red/);
    });

    it('should let you toggle string example', function() {
      expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('');
      input('style').enter('red');
      expect(element('.doc-example-live p:nth-of-type(2)').prop('className')).toBe('red');
    });

    it('array example should have 3 classes', function() {
      expect(element('.doc-example-live p:last').prop('className')).toBe('');
      input('style1').enter('bold');
      input('style2').enter('strike');
      input('style3').enter('red');
      expect(element('.doc-example-live p:last').prop('className')).toBe('bold strike red');
    });
  </script>
</div>
</div><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-61" ng-eval-javascript=""></div>
<h4 id="example_animations">Animations</h4>
<p>The example below demonstrates how to perform animations using ngClass.</p>
<h4 id="example_source">Source</h4>
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-64" source-edit-css="style.css-65" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-66" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-64" ng-html-wrap=" angular.js angular-animate.js"></pre>
<script type="text/ng-template" id="index.html-64">
   <input type="button" value="set" ng-click="myVar='my-class'">
   <input type="button" value="clear" ng-click="myVar=''">
   <br>
   <span class="base-class" ng-class="myVar">Sample Text</span>
  </script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-65"></pre>
<style type="text/css" id="style.css-65">
    .base-class {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    }

    .base-class.my-class {
      color: red;
      font-size:3em;
    }
  </style>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-66"></pre>
<script type="text/ng-template" id="scenario.js-66">
    it('should check ng-class', function() {
      expect(element('.doc-example-live span').prop('className')).not().
        toMatch(/my-class/);

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

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

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

      expect(element('.doc-example-live span').prop('className')).not().
        toMatch(/my-class/);
    });
  </script>
</div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-64" ng-eval-javascript=""></div>
<h4 id="example_ngclass-and-pre-existing-css3-transitions/animations">ngClass and pre-existing CSS3 Transitions/Animations</h4>
<p>The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
Upon animation ngAnimate will apply supplementary CSS classes to track the start and end of an animation, but this will not hinder
any pre-existing CSS transitions already on the element. To get an idea of what happens during a class-based animation, be sure
to view the step by step details of <a href="api/ngAnimate.$animate#methods_addclass">$animate.addClass</a> and
<a href="api/ngAnimate.$animate#methods_removeclass">$animate.removeClass</a>.</p>
</div></div>
</div>