gpt4 book ai didi

javascript - 在 ng-repeat 中显示子数组

转载 作者:数据小太阳 更新时间:2023-10-29 05:54:47 27 4
gpt4 key购买 nike

在我的 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 深空灰色 128GB”

附言。 Angular 插补温度更改为 [[ ]]由于使用 mustachePHP 的相同页面。

最佳答案

我不确定我是否理解您的问题,但您可以将模型划分为 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>

请看这个插件: 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

关于javascript - 在 ng-repeat 中显示子数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26957664/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com