La directiva ng-model-options tiene la característica que ayuda al usuario a modificar, dentro de la aplicación actual, el comportamiento de las directivas ngModel. Básicamente, está en uso cuando el usuario tiene que controlar el enlace de una variable y un elemento de formulario HTML en el alcance.
También puede especificar la cantidad de tiempo de espera para que se produzca la vinculación. Se puede programar para que tome algún tiempo o se puede hacer casi instantáneamente (como en el ejemplo a continuación).
Sintaxis:
<element ng-model-options="option"> </element>
La sintaxis es compatible con:
- <entrada>
- <seleccionar>
- <área de texto>
Parámetro:
- opción: un objeto que especifica las opciones debe ir seguido del enlace de datos.
- {updateOn: ‘event’} especifica que el enlace debe ocurrir cuando ocurre el evento específico.
- {debounce: 1000} especifica el tiempo de espera con el enlace en milisegundos.
- {allowInvalid: true|false} especifica si el enlace puede ocurrir si el valor no se validó.
- {getterSetter: true|false} especifica si las funciones vinculadas al modelo deben tratarse como getters/setters.
- {timezone: ‘0100’} Especifica qué zona horaria se debe usar cuando se trabaja con el objeto Fecha.
Ejemplo: este ejemplo le dirá cómo la directiva ng-model-options podría mantener el enlace de datos del valor de un campo de entrada hasta que se pierda el foco del campo.
También notará que el valor se actualizará instantáneamente cuando ingrese algo.
<!DOCTYPE html>
<html>
<script src="
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body style="text-align:center">
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
Using ng-model-options directive
</h2>
<div ng-app="myApp"
ng-controller="myCtrl">
<p>Please enter something below:</p>
<input ng-model="name"
ng-model-options="{
updateOn: 'default blur',
debounce: { default: 500, blur: 0 } }"
style="text-align:center">
<p>The binding is going to wait for
the value until the focus of the
field is lost:</p>{{name}}</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Shah Rukh Khan";
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA