다음과 같은 배열이있는 제품이 있습니다.
$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
이와 같은 앱을 찾았지만 찾을 수 없습니다.
javascript / angular (질문의 태그)와 너무 관련이 없기 때문에 모든 스타일을 지정하지는 않지만 다음은이를 달성하는 방법입니다.
선택한 크기의 배열 인덱스를 저장 한 다음이를 사용하여 표시 할 다른 항목을 결정합니다. 따라서 "L"이 선택되면 인덱스는 2입니다. proPrize [2]는 "L"의 가격을 나타내고, proSize [2]는 측정 값, proSizePx [2]는 "L"에 대한 w / e입니다.
예 : 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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다