在angularjs中使用select 賦值 ng-options配置方法該怎麼做？

下面我就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價值，希望對大家有所幫助。

陣列方式

#資料是數組

$scope.years = [2014, 2015, 2016];

頁面元素

 <select ng-model="item" ng-options="item as y for y in years">
 </select>

#設定預設值

##如果需要設定預設的選項，可以先設定一個參數：

$scope.item = 2016;
$scope.years = [2014, 2015, 2016];

#物件陣列方式

資料是物件數組

$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

#頁面元素

 <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
 </select>

設定預設值

如果需要設定預設的選項，可以先設定一個參數：

$scope.site = "163";
$scope.sites = [
 {site : "baidu", url : "https://www.baidu.com"},
 {site : "163", url : "http://www.163.com"},
 {site : "sina", url : "http://www.sina.com"}
];

Key-Vules物件陣列方式

#資料是物件陣列

$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

#頁面元素

<select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
</select>

#設定預設值

如果需要設置預設的選項，可以先設定一個參數：

$scope.site = "BYD";
$scope.cars = {
car1 : {brand : "BYD", model : "Y50", color : "red"},
car2 : {brand : "CC", model : "HF", color : "white"},
car3 : {brand : "JL", model : "JL10D", color : "black"}
};

#angularjs ng-options官方API

#數組類型:

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr

#物件類型:

##

label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

NodeJS父進程與子進程資源共享原則與實作方法

vue axios 表單提交上傳圖片的實例

vue中實作圖片和檔案上傳的範例程式碼

##

以上是在angularjs中使用select 賦值 ng-options配置方法該怎麼做？的詳細內容。更多資訊請關注PHP中文網其他相關文章！