提问人:Navorski 提问时间:12/4/2022 最后编辑:Barbaros ÖzhanNavorski 更新时间:12/4/2022 访问量:36
AngularJS 嵌套对象位于同一引导行中
AngularJS nested objects in the same bootstrap row
问:
我有一个JSON对象
{
"products": [
{
"devices": [
{
"label": "P1D1"
},
{
"label": "P1D2"
}
]
},
{
"devices": [
{
"label": "P2D1"
},
{
"label": "P2D2"
}
]
}
]
}
我想在 HTML 中有这样的东西
<div class="row">
<div class="col-3">
P1D1
</div>
<div class="col-3">
P1D2
</div>
<div class="col-3">
P2D1
</div>
<div class="col-3">
P2D2
</div>
</div>
AngularJS 是我正在使用的语言,但我似乎没有找到正确的语法
<div class="row">
<div ng-repeat="product in obj.products">
<div class="col-3" ng-repeat="device in product.devices">
{{device.label}}
</div>
</div>
</div>
如何实现将所有子项并排显示在引导列中?
答:
1赞
AvgustinTomsic
12/4/2022
#1
我认为你不能直接使用 HTML 来做到这一点。或者,您可以在 Javascript 中使用一些操作来展平数据。
JAVASCRIPT的
$scope.getItems = function(){
return $scope.obj.products.flatMap(function(element){
return element.devices;
})
}
[HTML全文]
<div class="col-3" ng-repeat="device in getItems()">
{{device.label}}
</div>
看看我的例子:https://codepen.io/avgustint/pen/XWYyoyd?editors=1111
评论