欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular.JS中select下拉框設(shè)置value的方法

 更新時間:2017年06月20日 09:05:32   作者:實習(xí)小編嘿  
select 是 AngularJS 預(yù)設(shè)的一組directive。下面這篇文章主要給大家介紹了關(guān)于Angular.JS中select下拉框設(shè)置value的方法,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。

前言

本文主要給大家介紹的是關(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詳解

    本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關(guān)資料,及示例代碼,幫助大家學(xué)習(xí)和理解,有興趣的小伙伴可以參考下
    2016-09-09
  • angular4 共享服務(wù)在多個組件中數(shù)據(jù)通信的示例

    angular4 共享服務(wù)在多個組件中數(shù)據(jù)通信的示例

    本篇文章主要介紹了angular4 共享服務(wù)在多個組件中數(shù)據(jù)通信的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • angularjs ocLazyLoad分步加載js文件實例

    angularjs ocLazyLoad分步加載js文件實例

    本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • Facade Service暴露commands簡化代碼邏輯提高可訪問性組合性

    Facade 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-10
  • AngularJS數(shù)據(jù)源的多種獲取方式匯總

    AngularJS數(shù)據(jù)源的多種獲取方式匯總

    在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對angularjs獲取數(shù)據(jù)源的方式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02
  • angular5 子組件監(jiān)聽父組件傳入值的變化方法

    angular5 子組件監(jiān)聽父組件傳入值的變化方法

    今天小編就為大家分享一篇angular5 子組件監(jiān)聽父組件傳入值的變化方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解Angular.js指令中scope類型的幾種特殊情況

    詳解Angular.js指令中scope類型的幾種特殊情況

    AngularJs最重要也是最難理解的模塊之一就是它的指令(directive)了,自定義指令配置有很多個參數(shù),下面這篇文章主要介紹了關(guān)于Angular.js指令中scope類型的幾種特殊情況,需要的朋友可以參考下。
    2017-02-02
  • AngularJS變量及過濾器Filter用法分析

    AngularJS變量及過濾器Filter用法分析

    這篇文章主要介紹了AngularJS變量及過濾器Filter用法,結(jié)合實例形式分析了AngularJS變量、過濾器及自定義過濾器的相關(guān)用法與注意事項,需要的朋友可以參考下
    2016-11-11
  • Angular JS 生成動態(tài)二維碼的方法

    Angular JS 生成動態(tài)二維碼的方法

    這篇文章主要介紹了Angular JS 生成動態(tài)二維碼的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • 詳解Angular的8個主要構(gòu)造塊

    詳解Angular的8個主要構(gòu)造塊

    Angular 主要分為八大構(gòu)造塊(也就是八個核心概念):模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下
    2017-06-06

最新評論