Angularjs ng-options 对象

Question

我有一个表格，用于收集歌手的名字和姓氏、2 位吉他手的名字和姓氏以及鼓手的名字和姓氏等信息。我正在尝试使用 ng-options 将这些值推送到 select 标记中。

我可以成功地让吉他手的名字出现在选择下拉菜单中，但我似乎无法让歌手和鼓手出现。

<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/

任何见解将不胜感激。

Answer 1

使用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