-2

我有一个数组的产品如下：

$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",
}
];

我怎样才能像这样显示它并知道什么尺寸是活动的？

http://s9.postimg.org/50vtm5cpb/my_dream.gif

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

4

1 回答 1

0

我不会设置所有样式，因为这与 javascript / angular（问题的标签）不太相关，但这里是如何实现这一点：

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

示例： http: //jsfiddle.net/TheSharpieOne/G9zQ8/（单击每个产品的尺寸，将填充该尺寸的信息）

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

这是完成所有工作的模板：

    <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>
于 2013-09-04T13:46:19.250 回答