ngReadonly

- directive in module ng

Contents

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();
});

Load online demo