EVOLUTION-MANAGER

Edit File: ngDisabled.html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/directive/attrs.js?message=docs(ngDisabled)%3A%20describe%20your%20change...#L154' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>

<a href='https://github.com/angular/angular.js/tree/v1.3.9/src/ng/directive/attrs.js#L154' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>

<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngDisabled</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>

<div class="api-profile-description">
  <p>We shouldn&#39;t do this, because it will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:</p>
<pre><code class="lang-html">&lt;div ng-init=&quot;scope = { isDisabled: false }&quot;&gt;
 &lt;button disabled=&quot;{{scope.isDisabled}}&quot;&gt;Disabled&lt;/button&gt;
&lt;/div&gt;
</code></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>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 100.</li>
  </ul>

<h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;INPUT&#10;  ng-disabled=&quot;&quot;&gt;&#10;...&#10;&lt;/INPUT&gt;</code></pre>
      </li>
    
  </div>
  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <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>
        <p>If the <a href="guide/expression">expression</a> is truthy,
    then special attribute &quot;disabled&quot; will be set on the element</p>

</td>
    </tr>
    
  </tbody>
</table>

</section>

<h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example53')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

<div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>Click me to toggle: &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot;&gt;&lt;br/&gt;&#10;&lt;button ng-model=&quot;button&quot; ng-disabled=&quot;checked&quot;&gt;Button&lt;/button&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should toggle button&#39;, function() {&#10;  expect(element(by.css(&#39;button&#39;)).getAttribute(&#39;disabled&#39;)).toBeFalsy();&#10;  element(by.model(&#39;checked&#39;)).click();&#10;  expect(element(by.css(&#39;button&#39;)).getAttribute(&#39;disabled&#39;)).toBeTruthy();&#10;});</code></pre>
    </div>

</p>

</div>