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.
<!-- If value is False -->
<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
<!-- If value is False -->
<ANY ng-readonly="False">
Always Read and Write both property will be enable
</ANY>
Syntax
<ANY ng-readonly="{expression}">
......
</ANY>
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.
![checked CheckBox]()