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

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选项，如果不是什么我的其他选项使用角度。

Answer 1

任何角度都可能;）但对于这样的东西（数据在那个形状），使用选项组将是你唯一的选择。要将它们显示为您展示的选项的直接列表，您必须先将对象展平，然后对新对象/数组执行ng选项。

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