AngularJS Forms自定义模型更新触发器
在上一篇文章中，我们介绍了angularJS中的一些基本表单和自定义表单验证。
我们在较早的文章中通过一些示例讨论了这些概念。
在这篇文章中，我们将讨论引入Angular 1.3的名为ng-model-options的指令，以及如何在我们的表单中使用它来控制模型更新。
ngModelOptions
ngModelOptions可以控制Angular更新和操作模型的方式。
默认情况下，对内容的任何更改都会触发模型更新和表单验证。
我们可以使用ngModelOptions指令覆盖此默认行为。
这包括自定义模型，使其仅在触发某些事件或者非立即的模型更新/去抖延迟之后才进行更新，以便仅在计时器到期时才进行实际更新。
我们将在本文中讨论这两件事。
语法
以下代码显示了angularJS中ngModelOptions指令的用法。
<input ng-model="employee.name" ng-model-options="Object"
其中对象表示可以应用于当前模型的选项。
使用以下选项：
updateOn：一个字符串值，指定将输入绑定到的事件。
您可以使用以空格分隔的列表指定多个事件，例如ng-model-options =" {updateOn：'blur mouseover'}"debounce：定义一个整数值，该值表示模型更新延迟(以毫秒为单位)。
如果要触发立即更新，可以将值设置为零。
您可以像使用ng-model-options =" {updateOn：'blur'，debounce：{'blur'：0}}"这样使用该选项。allowInvalid：这是一个布尔值，表示可以设置模型值，而与字段的有效性无关。
如果我们未指定ʻallowInvalidʻ选项，则模型的默认值为undefined。" getterSetter"：布尔值，用于确定是否将绑定到模型的函数视为getter或者setter。
timezone：定义要使用的时区。
使用updateOn和debounce选项
以下示例说明了ngModelOptions指令中的updateOn和debouce选项的用法。
我们在formApp模块中定义了一个FormController，并在其范围内创建了一个employee对象。
app.js
var app = angular.module('formApp', []);
app.controller('FormController', function($scope) {
$scope.employee = {};
});
" novalidate"属性用于禁用HTML5中的默认浏览器验证。
在以下代码中，您可以看到我们如何使用ng-model-options指令的updateOn选项。
失去焦点时，模型值将更新。
Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"
以下代码用于在250毫秒后更新模型。debounce选项会延迟模型更新。
Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"
以下代码同时使用了updateOn和debounce选项。
将模糊事件的"去抖动"值设置为" 0"表示该模型在失焦时会立即触发更新。
Email : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"
以下示例显示了这些概念的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS Custom Model Update</title>
</head>
<body ng-app="formApp">
<div ng-controller="FormController">
<form novalidate>
Name : <input type="text" ng-model="employee.name" ng-model-options="{updateOn:'blur'}"</br>
Gender : <input type="text" ng-model="employee.gender" ng-model-options="{debounce:250}"</br>
E-mail : <input type="email" ng-model="employee.email" ng-model-options="{updateOn:'blur',debounce:{blur:0} }"</br>
</form>
<p>Name : {{employee.name}}</p>
<p>Gender : {{employee.gender}}</p>
<p>Email : {{employee.email}}</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
现在，您可以播放以下输出，并查看这些选项的区别。
angularJS 1.3中引入的ng-model-options指令在表单处理和验证中非常有用。
