AngularJs ng-model-options Directive

Wednesday, February 3rd, 2016 (0 Comment)

1. What is AngularJs ng-model-options directive

We often use angularjs ng-model-options directive to configure some parameters related to ng-model. When running application, this Directive will execute before create ng-model.

The configuration parameters will determine the value of the model can be modified and saved to $scope or not? If so, when saved up? and how to save? All these questions are the ngModelOptions in angular (angularjs ng-model-options).

2. The parameters of the AngularJs ng-model-options

  • updateOn: Decide when to update the data in the $scope, often used as blur, default, kepress ….
  • debounce: Its value is the type INT, it determines how long the data will be updated in the $scope.
  • getterSetter: We will learn through 4 section later, it is simply the methods get and set the same in java, C# or C++.
  • There are two more options allow Invalid, timezone, but we’ll learn it later.

3. Examples ng-model-options in AngularJS

In this example, we will have an input and a span tag used to display its value during data entry.. We’ll split into two examples, the first not use updateOn options and the second use updateOn .

3.1. Example 1: Not using ng-model-options updateOn

Demo

  • When you enter data, the result will display under because we using data binding mechanism (ng-bind)

Output:

3.2. Example 2: using ng-model-options updateOn

Demo

  • This example the same Example 1, but I have using attributes ng-model-options = “{updateOn: ‘blur’}” means that when we enter the data and click the mouse cursor off the input tag, the event update in $scope will implement so it does not change when you’re typing.

3.3. Example 3: using ng-model-options debounce

In example 2, you change {updateOn: ‘blur’} to {debounce:1000}. debounce: 1000, which means that when we stop typing after 1 second will appear Results.

Demo

3.4. Example 4: using ng-model-options debounce and updateOn

In example 2, you change {updateOn: ‘blur’} to {updateOn:’blur’, debounce:1000}. That means when we click the mouse cursor off the input tag and after 1 second will appear Results.

Demo

3.5. Example 5: using ng-model-options getterSetter

Demo

  • Line 13: getterSetter whose value is true or false, if true, it allows use getterSetter, and vice versa if false then not use getterSetter.
  • Line 25: angular.isDefined function to check that the variable is defined or not, if yes, assign new values to the _name variable; otherwise, it does not assign anything and finally return default _name (“lvtutorial.com” in line 22).
  • Line 15: note using getterSetter is user.name() not property user.name

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *