Read Only Directive in AngularJS

Read Only Preserves the values of HTML.

In AngularJS "ng-readonly" Directive is there by which read only property can be enable.

ng-readonly takes boolean variable or boolean expression.

If it takes the value "1 / TRUE" then read-only property will be enable.


<ANY ng-readonly="False">
Always Read and Write both property will be enable
</ANY>
If it takes the value "0 / FALSE" then read-only property will be disable


<ANY ng-readonly="False">
Always Read and Write both property will be enable
</ANY>

Syntax

Example -Following Example shows that how can we make a Text-Box as a read only.

<!doctype html>

<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
Check the CheckBox to make Read only TextBox
<input type="checkbox" ng-model="checked"><br />
<input type="text" ng-readonly="checked" value="Hello C-sharp Corner" />
</body>
</html>

In the above example two controls are there

Check-Box
Text-Box

If checkbox will be checked then ng-readonly will get TRUE value and TextBox will be converted into Read-Only TextBox.

If checkbox will be unchecked then ng-readonly will get FALSE value and Read-Only TextBox will be converted into again Read-Write textbox.

Output

1. When CheckBox is unchecked.

Unchecked CheckBox

2. When CheckBox is checked.