如何在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-repeat而不是ng-show 。 您应该能够将其附加到getNunbersInArray(n)函数，该函数返回主数组的子集，然后可以将其循环所需的次数。

例如，如果您的主数组中有[1,1,3,4,5] ，则连接到新ng-repeat的函数将返回[1,1] （传递1时）和[2] （通过2），等等。

您无需对这些新数组中返回的值做任何事情，唯一重要的是它们包含正确数量的元素，以确保图像重复正确的次数。

Answer 2

根据收到的评论，这是我实现的解决方案：

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

已删除numberInArray函数，因为它不是必需的。 基本上，这现在遍历数组的数组，并显示在ng-src处找到的图像，在这种情况下为1.png，2.png等。这实现了我的目标，即在数组，无论其数量如何。