Question

我的产品有如下数组：

$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

我找过这样的应用程序但找不到。

Answer 1

我不打算设置所有内容，因为它与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>

ng-repeat with function inside

1 个答案: