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

以上是“angularjs中select賦值ng-options配置的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！