如何在ng-show中多次显示同一元素？

Question

I am playing around with a card game app, and I want a card image to show for each instance that is in the hand array. To keep it simple, I am looking to show card1.png if the array looks like [1,2,3,4,5]. However, I want the image to show twice if the array looks like [1,1,3,4,5]. So far, I can just get it to show once.

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

I'm not suggesting that this is the best solution, but to fix what you've currently got (or at least appear to have)...

Use another (nested) ng-repeat on each image instead of ng-show . You should be able to attach it to a getNunbersInArray(n) function that returns a subset of the main array that can then be looped through the desired number of times.

For example, if you have [1,1,3,4,5] in your main array, the function connected to the new ng-repeat s would return [1,1] (when passed 1) and [2] (when passed 2), etc.

You don't need to do anything with the values returned in these new arrays, the only thing that matters is that they contain the correct number of elements to ensure that the image is repeated the correct number of times.

Answer 2

Following the comments I received, this is the solution I implemented:

Index.html

<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>

The numberInArray function was removed as it was not required. Basically, This now iterates over the array of arrays, and displays the image found at the ng-src, which in this case would be 1.png, 2.png etc. This achieves my goal of showing the card image for each number in the array, regardless of its count.