knowhow-server/public/js/lib/angular-1.2.9/docs/partials/api/ng.directive:ngDisabled.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/booleanAttrs.js#L139" 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/booleanAttrs.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngDisabled</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-ngdisabled-page"><p>The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:
<pre class="prettyprint linenums">
&lt;div ng-init="scope = { isDisabled: false }"&gt;
 &lt;button disabled="{{scope.isDisabled}}"&gt;Disabled&lt;/button&gt;
&lt;/div&gt;
</pre>
<p>The HTML specification does not require browsers to preserve the values of boolean attributes
such as disabled. (Their presence means true and their absence means false.)
If we put an Angular interpolation expression into such an attribute then the
binding information would be lost when the browser removes the attribute.
The <code>ngDisabled</code> directive solves this problem for the <code>disabled</code> attribute.
This complementary directive is not removed by the browser and so provides
a permanent reliable place to store the binding information.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;INPUT ng-disabled="{expression}"&gt;
   ...
&lt;/INPUT&gt;</pre>
<h3 id="usage_directive-info">Directive info</h3>
<div class="directive-info"><ul><li>This directive executes at priority level 100.</li>
</ul>
</div>
<h4 id="usage_directive-info_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>ngDisabled</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngdisabled-page"><p>If the <a href="guide/expression">expression</a> is truthy, 
then special attribute &quot;disabled&quot; will be set on the element</p>
</div></td></tr></tbody></table></div>
<h2 id="example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngdisabled-page"><h4 id="example_source">Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-5" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-6" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-5" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-5">
  Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
  <button ng-model="button" ng-disabled="checked">Button</button>
</script>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-6"></pre>
<script type="text/ng-template" id="scenario.js-6">
  it('should toggle button', function() {
    expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
    input('checked').check();
    expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
  });
</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-5" ng-eval-javascript=""></div>
</div></div>
</div>