Improve this Doc View Source

The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (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 `ngReadonly` directive solves this problem for the `readonly` attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.

## Directive Info

- This directive executes at priority level 100.

## Usage

- as attribute:

      <INPUT
        ng-readonly="expression">
      ...
      </INPUT>

### Arguments

Param | Type | Details
--- | --- | ---
ngReadonly | expression | If the expression is truthy, then special attribute "readonly" will be set on the element

## Example

Edit in Plunker

    <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />

    it('should toggle readonly attr', function() {
      expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeFalsy();
      element(by.model('checked')).click();
      expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeTruthy();
    });