AngularJS | ng-model-options Directive

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
ngcut



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.