Of Stack

AngularJS Basic ng model options Simple Example

  • 2021-07-07 06:20:32
  • OfStack

AngularJS ng-model-options Directive

AngularJS instance

Bind the value of the input box to the scope variable when the focus is lost: 


<!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 :</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 binds the value of the input box when the focus is lost to  scope  Variable. </p>

</body>
</html>

Definition and usage

The ng-model-options directive binds an HTML form element to an scope variable

You can specify when the bind data will trigger, or how many milliseconds to wait. Please refer to the following instructions for parameter settings.

Grammar

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

< input > , < select > , < textarea > Element supports the directive.

Parameter value

值 描述
option 指定了绑定数据的规则，规则如下:

{updateOn: 'event'}规则指定事件发生后绑定数据

{debounce : 1000} 规定等待多少毫秒后绑定数据

{allowInvalid : true|false} 规定是否需要验证后绑定数据

{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型

{timezone : '0100'} 规则是否使用时区

The above is the data collation of AngularJS ng-model-options instruction, and the relevant data will be supplemented in the future.

Related articles: