顯示在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應該簡單地提供的選項標籤的一個長長的清單裏面有所有你想要的選項。