显示在NG-重复子阵列

Question

在我的角度程序，我有以下<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的空间灰色128GB”

PS。角插补温度由于使用胡须PHP的页面相同，因此更改为[[ ]]。

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

Answer 2

你需要使用“ngOptions”指令用于这一目的。 https://docs.angularjs.org/api/ng/directive/select 该指令可以采取任选项数组或选项的哈希值（对象）。 并省略'选项'中的'ngRepeat'。

Answer 3

这可能不是你要找的答案，但AngularJS总是推你与视图模型的工作，这意味着该意见量身定制的机型。

您的示例&其嵌套变体不是针对您要呈现的视图而定制的模型，因此我建议根据您当前的模型创建新模型。

这种新的模式将有每变种模型中的一个条目，将是平坦的，使得单一的NG-重复很容易对它们进行迭代。你甚至可以添加监视语句“manufacturerModels”，这样就可以确保你创建的选项NG重复的新模式始终是最新的。

另一种选择，这将与你想要做什么工作是创建一个简单的指令，只复制其内部HTML没有它的标签，例如：

<noTags>someHtml</noTags> --> someHtml 

我会离开它给你写这个指令，因为它相当简单。

然后，解决你的问题你只需要编写一个嵌套的NG-repeat语句，像这样：

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

呈现的HTML应该简单地提供的选项标签的一个长长的清单里面有所有你想要的选项。