AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

下拉列表的簡(jiǎn)單使用

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)沂南免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

ng-option指令使用很簡(jiǎn)單，只需要綁定兩個(gè)屬性：

一個(gè)是ng-model用于獲取選定的值；

另一個(gè)是ng-options用于確定下拉列表的元素?cái)?shù)組。

上面這條語句就是把選擇的值與engineer.currentActivity進(jìn)行雙向數(shù)據(jù)綁定，然后列表中的選項(xiàng)是activities中的每一個(gè)值。數(shù)據(jù)如下：

$scope.engineer = {
  name: "Dani",
  currentActivity: "Fixing bugs"
  };
  
  $scope.activities =
  [
  "Writing code",
  "Testing code",
  "Fixing bugs",
  "Dancing"
  ];

運(yùn)行結(jié)果如：

AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

為了美觀一點(diǎn)，這里引用了bootstrap。



 
 
  
 
 


 
 
  {{engineer.name}} is currently: {{ engineer.currentActivity}}
 
 
  Choose a new activity:

復(fù)雜對(duì)象，自定義列表名稱

有的時(shí)候下拉列表并不是單純的字符串?dāng)?shù)組，可能是json對(duì)象，例如：

$scope.activities =
  [
   { id: 1, type: "Work" , name: "Writing code" },
   { id: 2, type: "Work" , name: "Testing code" },
   { id: 3, type: "Work" , name: "Fixing bugs" },
   { id: 4, type: "Play" , name: "Dancing" }
  ];

這個(gè)時(shí)候，綁定的數(shù)據(jù)就必須是與這里面的格式相同的數(shù)據(jù)，比如直接復(fù)制其中一條：

$scope.engineer = {
   name: "Dani" ,
   currentActivity: {
   id: 3,
   type: "Work" ,
   name: "Fixing bugs"
   }
  };

當(dāng)然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循環(huán)列表拼接處下拉框的名稱

運(yùn)行效果如：

AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

全部的代碼如下：



 
 
  
 
 


 
 
 {{engineer.name}} is currently: {{ engineer.currentActivity}}
 
 
  Choose a new activity:

實(shí)現(xiàn)下拉列表的分組

其實(shí)分組與前面的例子很像，只要把空間中的ng-options的值換成下面：

添加 group by 就會(huì)按照后面的值進(jìn)行分組

AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

全部代碼：



 
 
  
 
 


 
 
 {{engineer.name}} is currently: {{ engineer.currentActivity}}
 
 
  Choose a new activity:

按照id進(jìn)行標(biāo)識(shí)

由于之前的ng-model相當(dāng)于初始的時(shí)候給設(shè)定了一個(gè)值。當(dāng)你選擇一個(gè)下拉列表選項(xiàng)的時(shí)候，就會(huì)覆蓋掉這個(gè)初始值。

所以更多的時(shí)候會(huì)使用一個(gè)id進(jìn)行標(biāo)識(shí)，這樣在初始化賦值的時(shí)候，只需要設(shè)定一個(gè)id就可以了。

$scope.engineer = {
   currentActivityId: 3
  };
  
  $scope.activities =
  [
   { id: 1, type: "Work" , name: "Writing code" },
   { id: 2, type: "Work" , name: "Testing code" },
   { id: 3, type: "Work" , name: "Fixing bugs" },
   { id: 4, type: "Play" , name: "Dancing" }
  ];

指令可以寫成下面的格式

通過 as 前面的值，就可以確定唯一的一個(gè)選項(xiàng)

AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

全部代碼如下：



 
 
  
 
 


 
 
 current is: {{ engineer.currentActivityId}}
 
 
  Choose a new activity:

以上這篇AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
網(wǎng)站URL：http://weahome.cn/article/pipihj.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管