AngularJS | Directiva de solo lectura ng

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:
ngreadonly
Después de marcar la casilla de verificación:
ngreadonly

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:
ngreadonly
Al hacer clic en el botón Actualizar:
ngreadonly

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *