La directiva ng-readonly en AngularJS se usa para especificar el atributo de solo lectura de un elemento HTML. El elemento HTML será de solo lectura si la expresión dentro de la directiva ng-readonly devuelve verdadero.
Sintaxis:
<element ng-readonly="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-readonly para habilitar la propiedad de solo lectura.
<!DOCTYPE html> <html> <head> <title>ng-readonly Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </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>
Salida:
Antes de marcar la casilla de verificación:
Después de marcar la casilla de verificación:
Ejemplo 2: este ejemplo usa la directiva ng-readonly para habilitar la propiedad de solo lectura en la lista de opciones.
<!DOCTYPE html> <html> <head> <title>ng-readonly Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </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>
Salida:
Al hacer clic en el botón Editar:
Al hacer clic en el botón Actualizar:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA