Angular 中 select指令用法詳解
最近在angular中使用select指令時(shí),出現(xiàn)了很多問題,搞得很郁悶。查看了很多資料后,發(fā)現(xiàn)select指令并不簡(jiǎn)單,決定總結(jié)一下。
select用法:
<select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select>
屬性說明:
發(fā)現(xiàn)并沒有ng-change屬性
ng-required:當(dāng)屬性值為true時(shí),對(duì)select添加required驗(yàn)證,為false時(shí)不驗(yàn)證。
ng-options:指定數(shù)據(jù)源,生成option選項(xiàng)。
數(shù)據(jù)源為數(shù)組時(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ù)源為對(duì)象時(shí),用法:
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ù)組/對(duì)象
label:option選項(xiàng)顯示的名稱。
select:是選中某一項(xiàng)后,綁定到ngModel的值。
value : 數(shù)組中的值。
?。╧ey,value):對(duì)象的key,value。
group by groupexpr:用于選項(xiàng)分組,
ng-options與ng-repeat自動(dòng)生成option選項(xiàng)的區(qū)別:
ng-options生成的option選項(xiàng)選中后,綁定到ngModel的值可以是對(duì)象。ng-repeat綁定到ngModel的值只能是字符串。
注意:select初始化時(shí)需要為ngModel指定值,否則會(huì)出現(xiàn)空白選項(xiàng)。
以上所述是小編給大家介紹的Angular 中 select指令用法詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼
這篇文章主要介紹了AngularJS 實(shí)現(xiàn)按需異步加載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2015-10-10
深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù),雙向綁定機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-12-12
angular學(xué)習(xí)之從零搭建一個(gè)angular4.0項(xiàng)目
本篇文章主要介紹了從零搭建一個(gè)angular4.0項(xiàng)目,主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0),有興趣的可以了解一下2017-07-07
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個(gè) JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
Angular2使用Angular CLI快速搭建工程(一)
這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
在AngularJs中設(shè)置請(qǐng)求頭信息(headers)的方法及不同方法的比較
在AngularJs中有三種方式可以設(shè)置請(qǐng)求頭信息,文中對(duì)每種方法給大家介紹的非常詳細(xì),選擇那種方式可以根據(jù)自己的需求,感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-09
對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器(六)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
angularJs中datatable實(shí)現(xiàn)代碼
本篇文章主要介紹了angularJs中datatable實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06

