Angular.JS中select下拉框設(shè)置value的方法
前言
本文主要給大家介紹的是關(guān)于Angular.JS中select下拉框設(shè)置value的相關(guān)內(nèi)容，非常出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
最近在系統(tǒng)中增加一個(gè)查詢的篩選條件，通過下拉框選取，用的是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è)問題，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ù)雜，不過value總算有了正確的值。
然后試著取值：
alert($scope.filter.detectUnitId);
問題解決！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(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)文章
詳解創(chuàng)建自定義的Angular Schematics
本文對(duì) Angular Schematics 進(jìn)行了介紹，并創(chuàng)建了一個(gè)用于創(chuàng)建自定義 Component 的 Schematics ，然后在 Angular 項(xiàng)目中以它為模板演練了通過 Schematics 添加自定義的 Component，感興趣的小伙伴們可以參考一下2018-06-06
Angular ng-repeat遍歷渲染完頁面后執(zhí)行其他操作詳細(xì)介紹
這篇文章主要介紹了Angular ng-repeat遍歷渲染完頁面后執(zhí)行其他操作詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12
Angular中Lazy Loading懶加載陷阱避坑最佳實(shí)踐
這篇文章主要為大家介紹了Angular中Lazy Loading懶加載陷阱避坑最佳實(shí)踐,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要為大家詳細(xì)介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來實(shí)現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了Angularjs CURD 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了ng-alain表單使用方式詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
通過實(shí)例代碼給大家詳細(xì)講述了angular動(dòng)態(tài)表單的制作方法，對(duì)此有需要的朋友參考下。2018-02-02