今天先來說說ngModelOption
我們項目用angular做了個校驗標簽。當輸入非法的時候，會提示錯誤的提示框。
需求
兩個輸入框 需要互動，
左邊的是最小字數 ， 右邊的是最大字數。
左邊< 右邊的字數
感覺很簡單
問題
其中有一種情況是這樣
1 左邊先輸入33， 右邊輸入22.
2 正確情況下 右邊報錯，我修改左邊的33為3.
3 但是右邊的報錯沒有消失
我寫了各種邏輯，最后發現就是無法拿到右邊的值
正常情況下
但是 驗證不通過
很明顯是無法綁定！！！
彎路
剛開始以為是組件庫搗鬼，翻看了組件庫的東西也並沒有得到很好的解決
然后發現異步可以拿到，但是這樣子兩個框互相異步調用，很容易造成死循環
解決
請教了一個angular方面的污神
扔了一堆圖片和解釋，大神鄙夷的看了我一眼。給我拋出
ngModelOptions 和官方鏈接
我當時的第一反應是這樣的
印象中這個不就什么時候同步ngModel的嗎？
好吧 我耐心看完 順便簡單記錄一下
updataOn 指定ng-model以什么綁定事件觸發
default 就是默認的大家都知道
blur 失去焦點的時候更新
mouseover 鼠標滑過
.......
<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}">
<p>Hello{{name}}</p>
debounce 延遲更新
debounce 以毫秒為單位
<input type="text" ng-model="name" ng-model-options="{debounce: 1000}">
<p>Hello{{name}}</p>
它的用法，其實很多比如再搜索的時候，當用戶實時輸入，數據模型更新，會頻繁向后端請求。通過延遲更新模型，大大提高性能。
allowInvalid 是否需要驗證后綁定數據 （此處就可以解決剛剛我遇到的問題）
allowInvalid 默認值為false
<input type="email" ng-model="name" ng-model-options="{allowInvalid: true}">
<p>Hello{{name}}</p>
getterSetter 是否綁定到getters/setters函數上
其實 不是很懂這個用法
getterSetter默認值為 false
如果不綁定 ngModelOptions
<div ng-controller="myController">
<form name="userForm">
Name: <input Type="text" name="userName"
ng-model="user.name"/>
</form>
<pre>user.name = <span ng-bind="user.name()"></span></pre>
</div>
<script type="text/javascript">
var m1 = angular.module('app', []);
m1.controller('myController', ['$scope', function ($scope) {
var _name = 'MAYUFO';
$scope.user = {
name: function (newNAME) {
return angular.isDefined(newNAME) ? (_name = newNAME) : _name;
}
}
}]);
</script>
結果
如果使用了ngModelOptions
<div ng-controller="myController">
<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>
<script type="text/javascript">
var m1 = angular.module('app', []);
m1.controller('myController', ['$scope', function ($scope) {
var _name = 'MAYUFO';
$scope.user = {
name: function (newNAME) {
return angular.isDefined(newNAME) ? (_name = newNAME) : _name;
}
}
}]);
</script>
結果
timezone
主要用在<input type ='day'> <input type='time'>中，可以指定時區utc或者直接輸入時差+0430
<input type="date" ng-model="$ctrl.date" ng-model-options="{timezone: '+0430'}">
<p ng-bind="$ctrl.date"></p>
<input type="date" ng-model="$ctrl.datea" >
<p ng-bind="$ctrl.datea"></p>
$rollbackViewValue 同步模型和視圖
resetWithRollback(e) {
if (e.keyCode === 27) {
this.myForm1.myInput1.$rollbackViewValue();
}
}
<form role="form" name="$ctrl.myForm1" ng-model-options="{ updateOn: 'blur' }">
<input type="name" name="myInput1" ng-model="$ctrl.view1" ng-keydown="$ctrl.resetWithRollback($event)">
</form>
<p>{{$ctrl.view1}}</p>
好了 終於看完了所有的ngModelOptions的用法。
希望有朝一日，也能在小白面前裝逼成功
