©
本文档使用 PHP中文网手册 发布
允许调整模型更新时机。使用 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;
}
};
}]);