Open In App
Related Articles

AngularJS ng-readonly Directive

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside the ng-readonly directive returns true. The ng-readonly directive is required to change the value between true and false. In case, if the readonly attribute is set to false, then the presence of the readonly attribute makes the element readonly, irrespective of its value.

Syntax:

<element ng-readonly="expression"> 
    Contents... 
</element>

Parameter:

  • expression: It returns true if the expression sets the element’s readonly attribute.

This directive is supported by <input>, <textarea> elements.

Example 1: This example uses ng-readonly Directive to enable readonly property. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-readonly Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-readonly Directive</h2>
    <div>
        <label>Check to make month readonly:
            <input type="checkbox" ng-model="open">
        </label><br><br>
        Input Month:
            <input ng-readonly="open"
                   type="month"
                   ng-model="month">
    </div>
</body>
</html>

                    

Output:

 

Example 2: This example uses the ng-readonly Directive to enable the readonly property in option list. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-readonly Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app="app" style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-readonly Directive</h2>
    <div ng-controller="geek">
        <div>
            <button ng-click="edit=true">Edit</button>
            <button ng-init="edit=false" ng-click="edit=false">
                Update
            </button>
        </div>
        <br>
        <div>Select sorting algorithm</div><br>
        <div>
          <select class="form-control"
                  ng-disabled="!edit"
                  ng-init="status=1"
                  ng-model="status"
                  ng-options="s.id as s.set for s in set">
            </select>
        </div>
    </div>
 
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.set = [{ id: 1, set: 'Merge sort' },
            { id: 2, set: 'Quick sort' },
            { id: 3, set: 'Bubble sort' }];
        }]);
    </script>
</body>
</html>

                    

Output:

 



Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads