Improve this Doc View Source

## Overview

Sets the `readonly` attribute on the element, if the expression inside `ngReadonly` is truthy. Note that `readonly` applies only to `input` elements with specific types. See the input docs on MDN for more information.

A special directive is necessary because we cannot use interpolation inside the `readonly` attribute. See the interpolation guide for more info.

## 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

    <label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
    <input type="text" ng-readonly="checked" value="I'm AngularJS" 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();
    });