Javascript 内部有函数的ng重复

我的产品具有如下阵列：

$scope.products = [
  {proId:"1",
   proName:"test",
   proPrice:["35","57","67"],
   proSize:["3,5","4,7","7,10"],
   proSizePx:[["30","50"],["40","50"],["70","10"]],
   proHSize:["S","M","L"]
  },

  {proId:"2",
   proName:"Second",
   proPrice:["35","45"],
   proSize:["3,5","4,6"],
   proSizePx:[["30","50"],["40","50"]],
   proHSize:["S","M"],
  },

 {proId:"3",
  proName:"test",
  proPrice:"35",
  proSize:"3,5",
  proHSize:"S",
}
];

我怎样才能像这样显示它，并知道什么大小是活动的

---

我一直在寻找这样的应用程序，但没有找到。

我不打算设计所有的应用程序，因为它们与javascript/angular（问题的标签）不太相关，但下面是如何实现这一点：

存储选定大小的数组索引，然后使用该索引确定要显示的其他项目。因此，如果选择“L”，则索引为2。proPrize[2]表示“L”的价格，proSize[2]表示度量，proSizePx[2]表示“L”的w/e

示例：（单击每个产品的尺寸，将填充该尺寸的信息）

一切都在模板中完成，控制器只包含产品数据

以下是完成所有工作的模板：

    <div>
        <span class="size" data-ng-repeat="size in product.proHSize" data-ng-click="product.selectedSize = $index" data-ng-class="{selected: product.selectedSize == $index}">{{size}}</span>
    </div>
    <div>proPrice: {{product.proPrice[product.selectedSize]}}</div>
    <div>proSize: {{product.proSize[product.selectedSize]}}</div>
    <div>proSizePx: {{product.proSizePx[product.selectedSize]}}</div>
    <div>proHSize: {{product.proHSize[product.selectedSize]}}</div>

{{size}}
proPrice:{{product.proPrice[product.selectedSize]}
proSize:{{product.proSize[product.selectedSize]}
proSizePx:{{product.proSizePx[product.selectedSize]}
proHSize:{{product.proHSize[product.selectedSize]}

您只是要求我们完成全部工作吗？我认为您可能需要角度教程的这一点：