Question

我有以下JSON对象

 $scope.items = [
    { id: 1, name: 'Red',sizes:[{size:'s'},{size:'b'}]  },
    { id: 2, name: 'Green',sizes:[{size:'s'},{size:'b'}]   },
    { id: 3, name: 'Yellow',sizes:[{size:'s'},{size:'b'}]   }];

我正在尝试创建一个类似下面的选项

<select id="s1" >
    <option value="?" selected="selected"></option>
    <option value="Red S">Red S</option>
    <option value="Red b">Red b</option>
    <option value="Green S">Green S</option>
    <option value="Green b">Green b</option>
    <option value="Yellow S">Green S</option>
    <option value="Yellow b">Green b</option>

</select>

是否可以使用ng-options实现此目的，如果不是使用angular的其他选项。

Answer 1

Angular可以做任何事情;）但对于像这样的事情（该形状中的数据），使用选项组将是您唯一的选择。要将它们显示为所显示的选项的直接列表，您必须首先展平对象，然后在新对象/数组上执行ng-options。

<select id="s1" ng-model="selected">
    <option value=""></option>
    <optgroup ng-repeat="item in items" label="{{item.name}}">
      <option ng-repeat="size in item.sizes">{{item.name + ' ' + size.size}}</option>
    </optgroup>
</select>

查看此Plunkr。

如何使用angular从包含对象的对象填充选择下拉列表。

1 个答案: