angularjs select 賦值 ng-options配置方法
數(shù)組方式
數(shù)據(jù)是數(shù)組
$scope.years = [2014, 2015, 2016];
頁(yè)面元素
<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"}
];
頁(yè)面元素
<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"}
};
頁(yè)面元素
<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ù)組類(lèi)型:
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ì)象類(lèi)型:
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配置方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular2 (RC5) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS之自定義服務(wù)詳解(factory、service、provider)
本篇文章主要介紹了AngularJS之自定義服務(wù)詳解(factory、service、provider)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
AngularJS基礎(chǔ) ng-cut 指令介紹及簡(jiǎn)單示例
本文主要介紹AngularJS ng-cut 指令,這里對(duì)ng-cut指令的基礎(chǔ)資料進(jìn)行了整理,和詳細(xì)介紹,并附上代碼示例和實(shí)現(xiàn)效果圖,學(xué)習(xí)AngularJS 指令的朋友可以參考下2016-08-08
angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識(shí)別新的HTML語(yǔ)法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下2014-12-12
Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)具體的方法，需要的朋友可以參考下2017-07-07
AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS bootstrap啟動(dòng)的知識(shí)，這里整理了相關(guān)資料及簡(jiǎn)單實(shí)例代碼，,需要的朋友可以參考下2016-09-09
AngularJS constant和value區(qū)別詳解
angularJS可以通過(guò)constant(name,value)和value(name,value)對(duì)于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02
詳細(xì)解讀AngularJS中的表單驗(yàn)證編程
這篇文章主要介紹了詳細(xì)解讀AngularJS中的表單驗(yàn)證編程,AngularJS是一個(gè)非常熱門(mén)的JavaScript庫(kù),需要的朋友可以參考下2015-06-06