Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-model-options Directive

  • Difficulty Level : Expert
  • Last Updated : 11 Jun, 2019

The ng-model-options directive has the feature which helps the user to modify, within the current application, the behavior of the ngModel directives. Basically, it is in use when the user has to control the binding of a variable and an HTML form element in the scope.
You can also specify the amount of waiting time for binding to happen. It could be programmed to take some time or could be done almost instantly (as in the example below).

Syntax:

<element ng-model-options="option"> </element>

The syntax is supported by:

  • <input>
  • <select>
  • <textarea>

Parameter:

    option: An object specifying the options must be followed by the data-binding.

  • {updateOn: ‘event’} specifies that the binding should happen when the specific event occurs.
  • {debounce : 1000} specifies waiting time with the binding in milliseconds.
  • {allowInvalid : true|false} specify if the binding can happen if the value did not validate.
  • {getterSetter : true|false} specifies if functions bound to the model should be treated as getters/setters.
  • {timezone : ‘0100’} Specifies what timezone should be used when working with the Date object.

Example: This example is going to tell how the holding of the data-binding of the value of an input field could be done by ng-model-options directive until the focus of the field is lost.
You will also notice that the value will be updated instantly when you enter something.




<!DOCTYPE html>
  
<html>
  
<script src="
</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>

Output:
ngcut




My Personal Notes arrow_drop_up
Recommended Articles
Page :