一个对象的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选项

回答

相关问题