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