AngularJS 嵌套对象位于同一引导行中

AngularJS nested objects in the same bootstrap row

提问人:Navorski 提问时间:12/4/2022 最后编辑:Barbaros ÖzhanNavorski 更新时间:12/4/2022 访问量:36

问:

我有一个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>

如何实现将所有子项并排显示在引导列中?

json angularjs

评论


答:

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