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