在ng-repeat中显示子数组 [英] Displaying sub-array in ng-repeat

问题描述

在我的Angular应用中，我有以下<select>元素，其填充如下:

In my Angular app I have the following <select> element that is populated like so:

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响应. (我将在此处发布示例，但每个对象都相当冗长).

The above AngularJS snippet will return a JSON response of handset models stored in the API. (I'd post an example here but each object is quite lengthy).

无论如何，在每个模型"内部都是变量的子阵列-包含该设备可用的颜色和内存大小的对象.

Anyway, inside each 'model' is a sub-array of variants -- objects containing colours and memory sizes available for that device.

例如:

{
    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太空灰128GB"

I'd like to know if it's possible (and if so, how) to populate the model dropdown's <option>'s with the variants in the name. So where it currently says [[model.model]] (.model being the name), I need each option to say something like: "iPhone 6 space grey 128GB"

PS.角插补温度由于使用mustachePHP的页面相同，因此更改为[[ ]].

PS. Angular interpolation temp. changed to [[ ]] due to the same pages using mustachePHP.

推荐答案

我不确定我是否理解您的问题，但是您可以将模型分为optgroup，然后为每个模型中的每个变体提供一个选项:

I'm not sure I understand your question, but you can divide the models in optgroups and then have an option for each variant within each model:

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

请参阅以下代码: http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ?p=preview

或者，您必须展平数组:

Alternatively, you have to flatten your array:

$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:

And then you can use 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

Here's the updated Plnkr: http://plnkr.co/edit/rPNaGXEi0m9rvNkzQuBJ?p=preview

这篇关于在ng-repeat中显示子数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！