AngularJS ngreadonly Directive (original) (raw)

AngularJS ng-readonly Directive

Last Updated : 01 Aug, 2024

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:

Contents...

**Parameter:

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

This directive is supported by , elements.

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

HTML `

ng-readonly Directive

GeeksforGeeks

ng-readonly Directive

Check to make month readonly:

Input Month:

**Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240726223236/ngReadonly.mp4

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

HTML `

ng-readonly Directive

GeeksforGeeks

ng-readonly Directive

Edit Update

Select sorting algorithm

<script>
    let 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>

**Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240726223253/ngReadonly1.mp4