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

Answer 2

这可能不是您正在寻找的答案，但AngularJS一直在推动您使用视图模型，这意味着为视图量身定制的模型。

你的模特和模型的例子它的嵌套变体不是为您尝试呈现的视图量身定制的模型，因此我建议根据您当前的模型创建一个新模型。

这个新模型每个模型每个模型有一个条目，并且是平的，因此单个ng-repeat很容易迭代它们。您甚至可以向“manufacturerModels”添加监视语句，这样您就可以确保为选项ng-repeat创建的新模型始终是最新的。

另一个选项，可以与您尝试做的一样，是创建一个简单的指令，只复制其内部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应该只提供一长串选项标签，其中包含您想要的所有选项。

Answer 3

您需要使用＆＃39; ngOptions＆＃39;为此目的的指令。 https://docs.angularjs.org/api/ng/directive/select 该指令可以采用选项数组或选项的哈希（对象）。并省略了＆lt; ngRepeat＆＃39;在＆＃39;选项＆＃39;。

在ng-repeat中显示子数组

3 个答案: