angularjs select 賦值 ng-options配置方法

更新時間：2018年02月28日 10:41:03 作者：大大的微笑

下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

數(shù)組方式

數(shù)據(jù)是數(shù)組

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

頁面元素

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

設置默認值

如果需要設置默認的選項，可以先設置一個參數(shù)：

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

對象數(shù)組方式

數(shù)據(jù)是對象數(shù)組

$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>

設置默認值

如果需要設置默認的選項，可以先設置一個參數(shù)：

$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對象數(shù)組方式

數(shù)據(jù)是對象數(shù)組

$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>

設置默認值

如果需要設置默認的選項，可以先設置一個參數(shù)：

$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

數(shù)組類型:

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配置方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: