一個對象的Angularjs ng選項

我有一個表單，用於收集信息，如歌手的名和姓，2個吉他手的名字和姓氏以及鼓手的名和姓。我試圖將這些值推入與ng選項的選擇標記。一個對象的Angularjs ng選項

我可以成功獲得吉他手的名字在選擇下拉列表中顯示，但我似乎無法讓歌手和鼓手出現。

<select ng-model="band" ng-options="band.firstName for firstName in band"></select> 

$scope.band = {"singer": { 
    "firstName": "Dave", 
    "lastName": "Grohl" 
    },"guitarists": [ 
{ 
    "firstName": "Chris", 
    "lastName": "Shiflett" 
}, 
{ 
    "firstName": "Pat", 
    "lastName": "Smear" 
}],"drummer": { 
"firstName": "Taylor", 
"lastName": "Hawkins" }};

這裏有一個小提琴：http://jsfiddle.net/rfT7f/17/

任何有識之士將不勝感激。

來源

2014-04-14 Jack

隨着ngOptions，你必須使用一個一致的對象（或陣列）結構像

$scope.band = [ 
    { 
     "firstName": "Dave", 
     "lastName": "Grohl", 
     "role": "singer" 
    }, 
    { 
     "firstName": "Chris", 
     "lastName": "Shiflett", 
     "role": "guitarist" 
    }, 
    { 
     "firstName": "Pat", 
     "lastName": "Smear", 
     "role": "guitarist" 
    }, 
    { 
     "firstName": "Taylor", 
     "lastName": "Hawkins", 
     "role": "drummer" 
    } 
];

然後你就可以一起在你選擇做這樣組選項很酷的事情：

<select ng-model="bandMember" 
    ng-options="artist.firstName group by artist.role for artist in band"> 
</select>

編輯：

忘了提及你的ngModel應該指向你想要的位置撕掉選定的選項，在這種情況下$ scope。 bandMember

來源

2014-04-14 06:02:24 morloch

不幸的是，這是我必須與之合作的結構。是否有可能將每個的名字和姓氏複製到另一個數組中？並用它來代替？ – Jack

當然，使用lodash或下劃線，將其添加到您的控制器：'$ scope.artistList = []; _each（$ scope.band，function（artist，role）{if（_isArray（artist））{_.each（artist，function（member）{$ scope.artistList.push（member）;}）;} else {$ scope.artistList.push（artist）}}）;'然後使用'artistList'作爲你的'ng-options' – morloch

我試圖實現這個，但它不合作。我已經添加了下劃線，但我仍然收到錯誤.http：//jsfiddle.net/K94Hz/1/ – Jack

一個對象的Angularjs ng選項

回答

相關問題