Angular.JS中select下拉框設(shè)置value的方法
前言
本文主要給大家介紹的是關(guān)于Angular.JS中select下拉框設(shè)置value的相關(guān)內(nèi)容,非常出來(lái)供大家參考學(xué)習(xí),下面來(lái)一起看看詳細(xì)的介紹:
最近在系統(tǒng)中增加一個(gè)查詢的篩選條件,通過(guò)下拉框選取,用的是Angular常見(jiàn)的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)題解決!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
- angularjs 實(shí)現(xiàn)帶查找篩選功能的select下拉框?qū)嵗?/a>
- Angular實(shí)現(xiàn)下拉框模糊查詢功能示例
- Angularjs實(shí)現(xiàn)下拉框聯(lián)動(dòng)的示例代碼
- AngularJS使用ng-repeat指令實(shí)現(xiàn)下拉框
- AngularJS中下拉框的基本用法示例
- AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
- angularjs下拉框空白的解決辦法
- AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
相關(guān)文章
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識(shí),這里整理了一下相關(guān)資料,及示例代碼,幫助大家學(xué)習(xí)和理解,有興趣的小伙伴可以參考下2016-09-09angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務(wù)在多個(gè)組件中數(shù)據(jù)通信的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03angularjs ocLazyLoad分步加載js文件實(shí)例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Facade Service暴露commands簡(jiǎn)化代碼邏輯提高可訪問(wèn)性組合性
在 Angular 應(yīng)用開(kāi)發(fā)中,使用 Facade Service 暴露 commands(命令)以及訂閱這些 commands 是一個(gè)常見(jiàn)的設(shè)計(jì)模式,本文將詳細(xì)介紹在 Facade Service 中如何實(shí)現(xiàn)這一目標(biāo),并深入探討相關(guān)細(xì)節(jié),以及通過(guò)實(shí)際示例進(jìn)行說(shuō)明2023-10-10AngularJS數(shù)據(jù)源的多種獲取方式匯總
在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-02-02angular5 子組件監(jiān)聽(tīng)父組件傳入值的變化方法
今天小編就為大家分享一篇angular5 子組件監(jiān)聽(tīng)父組件傳入值的變化方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09AngularJS變量及過(guò)濾器Filter用法分析
這篇文章主要介紹了AngularJS變量及過(guò)濾器Filter用法,結(jié)合實(shí)例形式分析了AngularJS變量、過(guò)濾器及自定義過(guò)濾器的相關(guān)用法與注意事項(xiàng),需要的朋友可以參考下2016-11-11Angular JS 生成動(dòng)態(tài)二維碼的方法
這篇文章主要介紹了Angular JS 生成動(dòng)態(tài)二維碼的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02