对象的 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" }};

这是一个 fiddle :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