ng-show에서 같은 요소를 두 번 이상 표시하는 방법은 무엇입니까?

Question

나는 카드 게임 앱으로 놀고 있는데 핸드 어레이에있는 각 인스턴스에 대해 카드 이미지를 보여주고 싶습니다. 간단하게하기 위해 배열이 [1,2,3,4,5]처럼 보이면 card1.png를 보여 주려고합니다. 그러나 배열이 [1,1,3,4,5]처럼 보이는 경우 이미지가 두 번 표시되기를 바랍니다. 지금까지 단 한번만 볼 수 있습니다.

Index.html을

<div ng-repeat="hand in hands track by $index"> 
    Player {{$index}} hand: {{ hand }} 
    <img src="/images/faces-one.png" ng-show="numberInArray(hand, 1)"> 
    <img src="/images/two.png" ng-show="numberInArray(hand, 2)"> 
    <img src="/images/three.png" ng-show="numberInArray(hand, 3)"> 
    <img src="/images/four.png" ng-show="numberInArray(hand, 4)"> 
    <img src="/images/five.png" ng-show="numberInArray(hand, 5)"> 
    <img src="/images/six.png" ng-show="numberInArray(hand, 6)"> 
</div> 

App.js

$scope.numberInArray = function(hand, num) { 
    var found; 
    found = hand.includes(num) ? true : false; 
    return found; 
} 

Answer 1

, 이것은 내가 구현 된 솔루션입니다. 기본적으로 배열의 배열을 반복하고 ng-src에서 찾은 이미지를 표시합니다.이 경우 1.png, 2.png 등이됩니다. 이렇게하면 각 숫자에 대한 카드 이미지를 보여주는 내 목표가 달성됩니다. 그 수에 관계없이 배열.

Answer 2

나는 이것이 최선의 해결책이 제안 아니지만, (당신이 현재 가지고 무엇을 해결하기 위해 또는 적어도 가지고있는 것처럼 보입니다 ...)

각 이미지 i에 다른 (중첩 된) ng-repeat을 사용하십시오. ng-show의 nstead. 원하는 수만큼 반복 할 수있는 기본 배열의 하위 집합을 반환하는 getNunbersInArray(n) 함수에 연결할 수 있어야합니다. 당신이 당신의 주요 배열에 [1,1,3,4,5]이있는 경우

예를 들어, 새로운 ng-repeat들에 연결된 기능과 [2] (통과 2) 등

(1을 통과 할 때) [1,1] 당신은하지 않습니다 반환 이 새 배열에서 반환 된 값으로 무엇이든해야 할 필요가있는 유일한 요소는 올바른 수의 요소가 포함되어있어 이미지가 올바른 횟수만큼 반복되도록하는 것입니다.

에 Index.html이 필요하지 않은 것처럼 numberInArray 기능이 제거

<div ng-repeat="hand in hands track by $index"> 
    Player {{$index}} hand: 
    <div ng-repeat="card in hand track by $index"> 
     <img ng-src="/images/{{card}}.png"> 
    </div> 
</div> 

: 내가 접수 된 의견에 따라