2019年2月20日 星期三

ng-options 搭配 ng-model 注意

若 ng-model 綁定物件屬性,則選擇項目後會連動改到物件屬性 (但ng-model 還是會抓到正確的值),請不要再針對陣列尋找該屬性值對應物件,若要找出對應物件,則 ng-model 就綁定到物件,不要直接綁定物件屬性,或者增加一個屬性同樣對應到 ng-model 要綁定的屬性,以此屬性來查詢

例:
list=[{value:1,text:'a'},{value:2,text:'b'},{value:3,text:'c'},]
ng-options="a.value as a.text for a in list"
選擇第1個項目
ng-model=1
選擇第2個項目
ng-model=2
list=[{value:2,text:'a'},{value:2,text:'b'},{value:3,text:'c'},] (text:'a' 的 value 被改成 2)

增加另一個屬性對應 value
list=[{value:1,text:'a',id=1},{value:2,text:'b',id=2},{value:3,text:'c',id=3},]
以 id 來找物件

※不建議直接綁定物件屬性,曾經遇過該屬性會被莫名清空的問題,推測是因為 ng-options 的集合被清空造成連動,建議透過 ng-change 設定要綁定的物件屬性
ng-change="selectData['廠商編號']=selectData.vendor.value" ng-model="selectData.vendor" ng-options="a.text for a in selectData.vendors"

沒有留言:

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器