最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用AngularJS怎么動態(tài)生成select下拉框-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關(guān)使用AngularJS怎么動態(tài)生成select下拉框，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

十多年專注成都網(wǎng)站制作，成都企業(yè)網(wǎng)站建設(shè)，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對混凝土攪拌罐車等多個方面，擁有豐富的網(wǎng)站維護經(jīng)驗。

一、select相關(guān)知識

其中，value 是存儲到數(shù)據(jù)庫的值，在此處為0，1，2這些數(shù)值，label 為顯示在頁面的值，在此處為Html、Java這些字符。

二、ng-options

1.數(shù)組作為數(shù)據(jù)源

  • label for value in array

  • select as label for value in array

  • label group by group for value in array

代碼1(數(shù)組中為字符串)










 

最終得到的結(jié)果為：


 
 baidu
 Google
 apple

需要注意的是，在最后生成的html代碼中option的value 值為String:baidu ，會在數(shù)組中原有的字符串之前加上其類型的標識，這個通過百度了解到是因為angularjs版本問題造成，具體未測試。

代碼2（數(shù)組中為一個對象）









 

最終得到的html代碼為：



 
 baidu
 Google
 apple

通過生成的html代碼，我們可以看到這樣寫會使得最終的option 的value 值顯示為數(shù)據(jù)類型，而實際想要得到的結(jié)果是顯示我們選中的值，因此需要寫為：


ng-options="c.id as c.name for c in coms"

其中，c.id 對應(yīng)value ，c.name 對應(yīng)label 。生成html代碼為：


 
 百度
 谷歌
 蘋果

代碼3（根據(jù)對象屬性分類）










 

得到的html代碼為：


 
  百度
  谷歌
 
  蘋果
 		
 
  淘寶
 

注意事項(默認選中問題)

通過以上最終得到的HTML代碼可以發(fā)現(xiàn)，每次生成的代碼都會默認選中一個空白的選項，如果需要手動指定一個默認選中值應(yīng)該怎么設(shè)置？

我們有兩種方式(此處代碼不完整，驗證時請將html部分補充完整)：

2.對象作為數(shù)據(jù)源

  • label for (key, value) in object

代碼展示










	{{name4}}
 

3.全部語法

for array data sources:

  • label for value in array

  • select as label for value in array

  • label group by group for value in array

  • label disable when disable for value in array

  • label group by group for value in array track by trackexpr

  • label disable when disable for value in array track by trackexpr

  • label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

for object data sources:

  • label for (key , value) in object

  • select as label for (key ,value) in object

  • label group by group for (key,value) in object

  • label disable when disable for (key, value) in object

  • select as label group by group for(key, value) in object

  • select as label disable when disable for (key, value) in object

三、ng-repeat

代碼示例：

四、總結(jié)
使用ng-repeat動態(tài)生成select比ng-option略微簡單，但是ng-repeat有一定的局限性，選擇的值只能是一個字符串，而使用ng-option選擇的值可以是一個對象。

關(guān)于使用AngularJS怎么動態(tài)生成select下拉框就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。


本文名稱：使用AngularJS怎么動態(tài)生成select下拉框-創(chuàng)新互聯(lián)
當前URL：http://fisionsoft.com.cn/article/ejeod.html