您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(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>
但是有個(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);
問(wèn)題解決!
感謝各位的閱讀!關(guān)于“Angular.JS中select下拉框如何設(shè)置value”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(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)容。