Home>

AngularJS basic ng-model-options directive simple example

angularjs ng-model-options directive

angularjs example

Bind the value of the input box to the scope variable when it loses focus:

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<p>Update input box:</p>
<input ng-model="name" ng-model-options="{updateon:" blur "}">
<p>Bind the value of the input box to the scope variable when it loses focus:</p>
{{name}}
</div>
<script>
var app=angular.module ("myapp", []);
app.controller ("myctrl", function ($scope) {
  $scope.name="john doe";
});
</script>
<p>This example demonstrates how to use the ng-model-options directive to bind the value of the input box to the scope variable when it loses focus.</p>
</body>
</html>

Definition and usage

The ng-model-options directive binds html form elements to the scope variable

You can specify when the bound data is triggered,Or specify how many milliseconds to wait,Parameter setting can refer to the following description.

grammar

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

<input> ;,<select> ;,<textarea> ;, the element supports the directive.

Parameter value

value description
option Specifies rules for binding data,The rules are as follows:

{updateon:"event"} rules specify data to be bound after an event occurs

{debounce:1000} specifies how many milliseconds to wait before binding data

{allowinvalid:true | false} specifies whether to bind data after validation

{gettersetter:true | false} specifies whether to bind to the model as getters/setters

{timezone:"0100"} whether the rule uses a time zone

javascript

Related articles

  • Previous JS method for converting digital amount to uppercase RMB Chinese characters
  • Next JS example code for judging input string length (Chinese characters count as two characters, alphanumeric count as one)