Read Only Directive in AngularJS

This article will show you how to use Read Only Directives 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.

  1. 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>


  2. 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

  1. Check-Box
  2. 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