溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angular.JS中select下拉框如何設(shè)置value

發(fā)布時(shí)間:2021-07-30 11:58:01 來(lái)源:億速云 閱讀:298 作者:小新 欄目:web開發(fā)

這篇文章給大家分享的是有關(guān)Angular.JS中select下拉框如何設(shè)置value的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。

最近在系統(tǒng)中增加一個(gè)查詢的篩選條件,通過(guò)下拉框選取,用的是Angular常見的ng-options 指令:

<select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="detectUnit.name for detectUnit in detectQueryFilters.detectUnits"> 
   <option value="">全部</option> 
</select>

Angular.JS中select下拉框如何設(shè)置value

但是有個(gè)問(wèn)題,ng-options指令僅僅設(shè)置了下拉框選項(xiàng)的text,而不是value,打印下拉框的內(nèi)容如下:

<option value="" class="">全部</option> 
<option value="0">董浜惠健凈菜</option> 
<option value="1">古里綠品公司</option> 
<option value="2">曹家橋物流公司</option> 
<option value="3">董浜農(nóng)服中心</option>

value部分是自動(dòng)設(shè)置的0,1,2,3,并不是實(shí)際的id。

那么,Angualr js 怎樣設(shè)置下拉框的value呢?

網(wǎng)上查了一遍,結(jié)合自己的一點(diǎn)探索,找到了答案,類似于表格記錄的用法

<select id="selectDetectUnit" class="form-control" ng-model="filter.detectUnitId" > 
  <option value="">全部</option> 
 <option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="{{detectUnit.id}}">{{detectUnit.name}}</option> 
</select>

打印下拉框的內(nèi)容如下:

<option value="">全部</option>        
<!-- ngRepeat: detectUnit in detectQueryFilters.detectUnits --> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160101" class="ng-scope ng-binding">董浜惠健凈菜</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160102" class="ng-scope ng-binding">古里綠品公司</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160103" class="ng-scope ng-binding">曹家橋物流公司</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160104" class="ng-scope ng-binding">董浜農(nóng)服中心</option> 
<option ng-repeat="detectUnit in detectQueryFilters.detectUnits" value="160105" class="ng-scope ng-binding">港南村7組</option>

雖然option中多了一些屬性,看著有點(diǎn)復(fù)雜,不過(guò)value總算有了正確的值。

然后試著取值:

alert($scope.filter.detectUnitId);

Angular.JS中select下拉框如何設(shè)置value

問(wèn)題解決!

感謝各位的閱讀!關(guān)于“Angular.JS中select下拉框如何設(shè)置value”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI