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配置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了Angular4開發(fā)解決跨域問題詳解。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
關于Angularjs中自定義指令一些有價值的細節(jié)和技巧小結
這篇文章主要介紹了關于Angularjs中自定義指令一些有價值的細節(jié)和技巧小結,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹AngularJS 迭代器過濾,這里提供了詳細的知識資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要為大家詳細介紹了AngularJS實現分頁顯示數據庫信息效果的相關資料，感興趣的小伙伴們可以參考一下2016-07-07
本文主要介紹AngularJS 包含,這里對相關資料做了詳細整理,并附代碼實例和效果圖,有需要的朋友可以看一下2016-07-07
Angular 2父子組件數據傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關于Angular 2父子組件數據傳遞之@ViewChild獲取子組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
今天小編就為大家分享一篇angularJs中$http獲取后臺數據的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular js雙向綁定時字符串的轉換成數字類型的問題,需要的朋友可以參考下2017-06-06
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識資料，這里整理相關知識，及簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular中自定義Debounce Click指令防止重復點擊
本篇文章主要介紹了Angular中自定義Debounce Click指令詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07