©
This document uses PHP Chinese website manual Release
允许调整模型更新时机。使用 ngModelOptions 你可以指定一个触发模型更新和（或）消除抖动延迟事件列表，使实际更新只发生在计时器过期时。此计时器会被之后的其他变化重置。
鉴于ngModelOptions的性质， 在视图中显示的输入域的值可能不同于实际模型的值。这意味着如果你更新模型，你需要在新旧关的输入域上调用$rollbackViewValue，以确保它与模型同步，并会消除任何抖动。
引用控制的$rollbackViewValue方法的最简单的方法是确保输入组件被放置在一个具有name属性的表单中。这很重要，因为 form控制器使用它们的 name 属性发布到相关域。
任何挂起的更改会立即生效，当整个表单通过 submit事件提交时。注意 ngClick 事件会在模型更新前生效。使用 ngSubmit 来存取更新后的模型。
<ANY
ng-model-options="">
...
</ANY>| 参数 | 类型 | 详述 |
|---|---|---|
| ngModelOptions | Object |
应用于当前模型的可选项。有效的键名为：
|
下面的例子演示如何替换立即更新。表单内的输入控件只会在失去焦点时才更新模型 (blur 事件)。如果当前焦点在输入字段时按了escape键，当前模型的值会被重置。
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input Type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
ng-keyup="cancel($event)" /><br />
Other data:
<input Type="text" ng-model="user.data" /><br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.user = { name: 'say', data: '' };
$scope.cancel = Function (e) {
if (e.keyCode == 27) {
$scope.userForm.userName.$rollbackViewValue();
}
};
}]);var model = element(by.binding('user.name'));
var input = element(by.model('user.name'));
var other = element(by.model('user.data'));
it('should allow custom events', Function() {
input.sendKeys(' hello');
input.click();
expect(model.getText()).toEqual('say');
other.click();
expect(model.getText()).toEqual('say hello');});
it('should $rollbackViewValue when model changes', Function() {
input.sendKeys(' hello');
expect(input.getAttribute('value')).toEqual('say hello');
input.sendKeys(protractor.Key.ESCAPE);
expect(input.getAttribute('value')).toEqual('say');
other.click();
expect(model.getText()).toEqual('say');});Clear按钮，任何消除抖动操作会被取消，值会清空。<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input Type="text" name="userName"
ng-model="user.name"
ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.user = { name: 'say' };
}]);下面的例子演示如何绑定到getter/setters:
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input Type="text" name="userName"
ng-model="user.name"
ng-model-options="{ getterSetter: true }" />
</form>
<pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
var _name = 'Brian';
$scope.user = {
name: Function (newName) {
return angular.isDefined(newName) ? (_name = newName) : _name;
}
};
}]);