快捷導(dǎo)航

angularjs select 賦值 ng-options配置方法

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

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

數(shù)組方式

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

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

頁面元素

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

設(shè)置默認(rèn)值

如果需要設(shè)置默認(rèn)的選項(xiàng)，可以先設(shè)置一個(gè)參數(shù)：

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

對(duì)象數(shù)組方式

數(shù)據(jù)是對(duì)象數(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è)置默認(rèn)值

如果需要設(shè)置默認(rèn)的選項(xiàng)，可以先設(shè)置一個(gè)參數(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對(duì)象數(shù)組方式

數(shù)據(jù)是對(duì)象數(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è)置默認(rèn)值

如果需要設(shè)置默認(rèn)的選項(xiàng)，可以先設(shè)置一個(gè)參數(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

對(duì)象類型:

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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: