Open In App

AngularJS ng-model-options Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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. This directive is supported by the <input>, <select> & <textarea> tags.

Syntax:

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

Parameter:

  • {updateOn: ‘event’} specifies that the binding should happen when the specific event occurs.
  • {debounce: 1000} specifies the 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 1: This example is going to tell how the holding of the data-binding of the value of an input field could be done by the 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. 

HTML




<!DOCTYPE html>
  
<html>
<head>
    <script src="
</script>
</head>
  
<body style="text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3 style="color:purple">
        ng-model-options directive
    </h3>
    <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 = "Data Structures & Algorithms";
        });
    </script>
</body>
</html>


Output:

 

Example 2: This example describes the ng-model-options Directive in AngularJS by implementing the <textarea> element.

HTML




<!DOCTYPE html>
  
<html>
<head>
    <script src="
    </script>
</head>
  
<body style="text-align:center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3 style="color:purple">
        ng-model-options Directive
    </h3>
  
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>Enter some text:</p>
        <textarea ng-model="name" ng-model-options="{
            updateOn: 'default blur',
            debounce: { default: 500, blur: 0 } }">
        </textarea>
        <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 = 
                  "GeeksforGeeks Learning Together!"
        });
    </script>
</body>
</html>


Output:

 



Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads