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

对象的Angularjs ng-options

1 个答案: