在ng-repeat中显示子数组

Question

在我的Angular应用程序中,我有以下<select>元素,如下所示:

HTML

<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
    <option value="">Model</option>
    <option ng-repeat="model in manufacturerModels" value="[[model.id]]">[[model.model]]</option>
</select>

JS

$scope.manufacturerModels = $filter('filter')($scope.models, {manufacturer_id: manufacturerId});

上述AngularJS代码段将返回存储在API中的手机型号的JSON响应.(我会在这里发布一个例子,但每个对象都很冗长).

无论如何,每个'模型'内部都是变体的子数组 - 包含可用于该设备的颜色和内存大小的对象.

例如:

{
    model: "iPhone 6",
    manufacturer: "Apple",
    variants: [
        {
            color: "space grey",
            memory: "128GB"
        }
        {
            color: "gold",
            memory: "16GB"
        }
        {
            color: "space grey",
            memory: "64GB"
        }
    ]
}

目标

我想知道是否有可能(如果是这样,如何)<option>使用名称中的变体填充模型下拉列表.所以当前它说[[model.model]] 的名称(.model是名称),我需要每个选项说:"iPhone 6 space grey 128GB"

PS.角度插值温度 改成[[ ]]由于使用mustachePHP同一页面.

Answer 1

我不确定我理解你的问题,但你可以在optgroups中划分模型,然后为每个模型中的每个变体选择一个选项:

<select>
        <option value="">Model</option>
        <optgroup ng-repeat="model in data" label="{{model.model}}">
          <option ng-repeat="variant in model.variants" value="{{model}}">{{ model.model + '-' + variant.color }}</option>
        </optgroup>
</select>

请看这个plunkr:http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ？p = preview

或者,您必须展平您的阵列:

$scope.flatten = function(){
      var out = [];
      angular.forEach($scope.data, function(d){
        angular.forEach(d.variants, function(v){
          out.push({model: d.model, variant: v.color})
        })
      })
      return out;
    }

然后你可以使用ngSelect:

<select ng-model="myColor" ng-options="model.variant group by model.model for model in flatten()">
   <option value=""> -- select -- </option>
</select>

这是更新的Plnkr:http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ？p = preview