?
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
允許調(diào)整模型更新時機。使用 ngModelOptions
你可以指定一個觸發(fā)模型更新和(或)消除抖動延遲事件列表,使實際更新只發(fā)生在計時器過期時。此計時器會被之后的其他變化重置。
鑒于ngModelOptions
的性質(zhì), 在視圖中顯示的輸入域的值可能不同于實際模型的值。這意味著如果你更新模型,你需要在新舊關(guān)的輸入域上調(diào)用$rollbackViewValue
,以確保它與模型同步,并會消除任何抖動。
引用控制的$rollbackViewValue
方法的最簡單的方法是確保輸入組件被放置在一個具有name
屬性的表單中。這很重要,因為 form
控制器使用它們的 name
屬性發(fā)布到相關(guān)域。
任何掛起的更改會立即生效,當(dāng)整個表單通過 submit
事件提交時。注意 ngClick
事件會在模型更新前生效。使用 ngSubmit
來存取更新后的模型。
<ANY
ng-model-options="">
...
</ANY>
參數(shù) | 類型 | 詳述 |
---|---|---|
ngModelOptions | Object |
應(yīng)用于當(dāng)前模型的可選項。有效的鍵名為:
|
下面的例子演示如何替換立即更新。表單內(nèi)的輸入控件只會在失去焦點時才更新模型 (blur 事件)。如果當(dāng)前焦點在輸入字段時按了escape
鍵,當(dāng)前模型的值會被重置。
<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;
}
};
}]);