Angular 中 select指令用法詳解
最近在angular中使用select指令時,出現(xiàn)了很多問題,搞得很郁悶。查看了很多資料后,發(fā)現(xiàn)select指令并不簡單,決定總結(jié)一下。
select用法:
<select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select>
屬性說明:
發(fā)現(xiàn)并沒有ng-change屬性
ng-required:當(dāng)屬性值為true時,對select添加required驗(yàn)證,為false時不驗(yàn)證。
ng-options:指定數(shù)據(jù)源,生成option選項。
數(shù)據(jù)源為數(shù)組時,用法:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by groupexpr for value in array track by trackexpr
數(shù)據(jù)源為對象時,用法:
label for (key,value)in object
select as label for(key,value)in object
label group by group for(key,value)in object
select as label group by groupexpr for (key,value)in object track by trackexpr
具體說明:
array/object:數(shù)組/對象
label:option選項顯示的名稱。
select:是選中某一項后,綁定到ngModel的值。
value : 數(shù)組中的值。
?。╧ey,value):對象的key,value。
group by groupexpr:用于選項分組,
ng-options與ng-repeat自動生成option選項的區(qū)別:
ng-options生成的option選項選中后,綁定到ngModel的值可以是對象。ng-repeat綁定到ngModel的值只能是字符串。
注意:select初始化時需要為ngModel指定值,否則會出現(xiàn)空白選項。
以上所述是小編給大家介紹的Angular 中 select指令用法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法
這篇文章主要介紹了AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法,分析了問題的原因及AngularJS設(shè)置禁止IE對ajax緩存的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-08-08詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
下面小編就為大家?guī)硪黄斦凙ngularJs 控制器、數(shù)據(jù)綁定、作用域。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07angularjs實(shí)現(xiàn)與服務(wù)器交互分享
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計。2014-06-06AngularJS中實(shí)現(xiàn)動畫效果的方法
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細(xì)介紹并附有效果圖和代碼實(shí)例,有需要的小伙伴參考下2016-07-07解決angularJS中input標(biāo)簽的ng-change事件無效問題
今天小編就為大家分享一篇解決angularJS中input標(biāo)簽的ng-change事件無效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular單元測試之事件觸發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了Angular單元測試之事件觸發(fā)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01angularjs的select使用及默認(rèn)選中設(shè)置
本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價值,需要的朋友可以參考下2017-04-04簡介可以自動完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡介可以自動完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06