158 lines
8.3 KiB
HTML
Executable file
158 lines
8.3 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/ngClass.js#L72" 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> allows you to set CSS classes on HTML an element, dynamically, by databinding
|
|
an expression that represents all classes to be added.</p>
|
|
<p>The directive won'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"><ANY ng-class="{expression}">
|
|
...
|
|
</ANY></pre>
|
|
as class<pre class="prettyprint linenums"><ANY class="ng-class: {expression};">
|
|
...
|
|
</ANY></pre>
|
|
<h3 id="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="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 demostrates basic bindings via ngClass directive.
|
|
<h4>Source</h2>
|
|
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-52" source-edit-css="style.css-53" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-54"></div>
|
|
<div class="tabbable"><div class="tab-pane" title="index.html">
|
|
<pre class="prettyprint linenums" ng-set-text="index.html-52" ng-html-wrap=" angular.js"></pre>
|
|
<script type="text/ng-template" id="index.html-52">
|
|
<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
|
|
<input type="checkbox" ng-model="bold"> bold
|
|
<input type="checkbox" ng-model="strike"> strike
|
|
<input type="checkbox" ng-model="red"> red
|
|
<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"><br>
|
|
<input ng-model="style2" placeholder="Type: strike"><br>
|
|
<input ng-model="style3" placeholder="Type: red"><br>
|
|
</script>
|
|
</div>
|
|
<div class="tab-pane" title="style.css">
|
|
<pre class="prettyprint linenums" ng-set-text="style.css-53"></pre>
|
|
<style type="text/css" id="style.css-53">
|
|
.strike {
|
|
text-decoration: line-through;
|
|
}
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
.red {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</div>
|
|
<div class="tab-pane" title="End to end test">
|
|
<pre class="prettyprint linenums" ng-set-text="scenario.js-54"></pre>
|
|
<script type="text/ng-template" id="scenario.js-54">
|
|
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('bold').check();
|
|
expect(element('.doc-example-live p:first').prop('className')).toMatch(/bold/);
|
|
|
|
input('red').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><h2>Demo</h2>
|
|
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-52" ng-eval-javascript=""></div>
|
|
<h2>Animations</h2>
|
|
<p>The example below demonstrates how to perform animations using ngClass.</p>
|
|
<h2>Source</h2>
|
|
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-55" source-edit-css="style.css-56" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-57"></div>
|
|
<div class="tabbable"><div class="tab-pane" title="index.html">
|
|
<pre class="prettyprint linenums" ng-set-text="index.html-55" ng-html-wrap=" angular.js angular-animate.js"></pre>
|
|
<script type="text/ng-template" id="index.html-55">
|
|
<input type="button" value="set" ng-click="myVar='my-class'">
|
|
<input type="button" value="clear" ng-click="myVar=''">
|
|
<br>
|
|
<span ng-class="myVar">Sample Text</span>
|
|
</script>
|
|
</div>
|
|
<div class="tab-pane" title="style.css">
|
|
<pre class="prettyprint linenums" ng-set-text="style.css-56"></pre>
|
|
<style type="text/css" id="style.css-56">
|
|
.my-class-add, .my-class-remove {
|
|
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
|
|
-o-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;
|
|
}
|
|
|
|
.my-class,
|
|
.my-class-add.my-class-add-active {
|
|
color: red;
|
|
font-size:3em;
|
|
}
|
|
|
|
.my-class-remove.my-class-remove-active {
|
|
font-size:1.0em;
|
|
color:black;
|
|
}
|
|
</style>
|
|
</div>
|
|
<div class="tab-pane" title="End to end test">
|
|
<pre class="prettyprint linenums" ng-set-text="scenario.js-57"></pre>
|
|
<script type="text/ng-template" id="scenario.js-57">
|
|
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><h2>Demo</h2>
|
|
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-55" ng-eval-javascript=""></div>
|
|
<h2>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.
|
|
Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation
|
|
is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to
|
|
take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined
|
|
outside of ngAnimate.</p>
|
|
</div></div>
|
|
</div>
|