Angular.JS中select下拉框設(shè)置value的方法
前言
本文主要給大家介紹的是關(guān)于Angular.JS中select下拉框設(shè)置value的相關(guān)內(nèi)容,非常出來供大家參考學(xué)習(xí),下面來一起看看詳細(xì)的介紹:
最近在系統(tǒng)中增加一個查詢的篩選條件,通過下拉框選取,用的是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>
但是有個問題,ng-options
指令僅僅設(shè)置了下拉框選項的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部分是自動設(shè)置的0,1,2,3,并不是實際的id。
那么,Angualr js 怎樣設(shè)置下拉框的value呢?
網(wǎng)上查了一遍,結(jié)合自己的一點探索,找到了答案,類似于表格記錄的用法:
<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中多了一些屬性,看著有點復(fù)雜,不過value總算有了正確的值。
然后試著取值:
alert($scope.filter.detectUnitId);
問題解決!
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關(guān)資料,及示例代碼,幫助大家學(xué)習(xí)和理解,有興趣的小伙伴可以參考下2016-09-09angular4 共享服務(wù)在多個組件中數(shù)據(jù)通信的示例
本篇文章主要介紹了angular4 共享服務(wù)在多個組件中數(shù)據(jù)通信的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01Facade Service暴露commands簡化代碼邏輯提高可訪問性組合性
在 Angular 應(yīng)用開發(fā)中,使用 Facade Service 暴露 commands(命令)以及訂閱這些 commands 是一個常見的設(shè)計模式,本文將詳細(xì)介紹在 Facade Service 中如何實現(xiàn)這一目標(biāo),并深入探討相關(guān)細(xì)節(jié),以及通過實際示例進(jìn)行說明2023-10-10AngularJS數(shù)據(jù)源的多種獲取方式匯總
在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對angularjs獲取數(shù)據(jù)源的方式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-02-02angular5 子組件監(jiān)聽父組件傳入值的變化方法
今天小編就為大家分享一篇angular5 子組件監(jiān)聽父組件傳入值的變化方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09