使用AngularJS怎么動(dòng)態(tài)生成select下拉框

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

嵐縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

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

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

二、ng-options

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

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

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


 
 baidu
 Google
 apple

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

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

最終得到的html代碼為：



 
 baidu
 Google
 apple

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


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

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


 
 百度
 谷歌
 蘋果

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

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

我們有兩種方式(此處代碼不完整，驗(yàn)證時(shí)請(qǐng)將html部分補(bǔ)充完整)：

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

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

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆