如何在ng-show中多次顯示相同的元素？

我正在玩一個紙牌遊戲應用程序，並且我想要一張卡片圖像以顯示手數組中的每個實例。爲了簡單起見，如果數組看起來像[1,2,3,4,5]，我正在尋找顯示card1.png。但是，如果數組看起來像[1,1,3,4,5]，我希望圖像顯示兩次。到目前爲止，我可以讓它顯示一次。如何在ng-show中多次顯示相同的元素？

的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

來源

2017-01-23 jmcgui05

你不應該在視圖文件中進行這種計算。即使你可以修改邏輯，這也是非常低效的，因爲該函數將被稱爲***六次！*** **每次檢測到變化**。相反，你應該在控制器中建立你想要使用的圖像數組，並使用'ng-src'或類似的東西。 – Claies

換句話說，這裏應該有兩個循環，一個用於手中的手，一個用於手中的卡。 – Claies

儘管我的回答如下，但我同意@Claies。我們應該始終儘可能地在控制器中進行操作。 –

按照我收到的意見，這是我實現的解決方案：

的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等。這實現了我的目標，顯示每個數字的卡片圖像數組，而不管它的數量。

來源

2017-01-25 20:06:41 jmcgui05

我並不是說這是最好的解決辦法，但解決目前你有什麼（或至少看起來有）...

在每個圖像上使用另一個（嵌套）ng-repeat我而不是ng-show。你應該可以將它附加到一個getNunbersInArray(n)函數，該函數返回主數組的一個子集，然後可以循環所需的次數。

例如，如果您在主陣列中有[1,1,3,4,5]，連接到新ng-repeat S中的函數將返回[1,1]（通過1時）和[2]（當通過2）等

你不需要對這些新數組中返回的值做任何事情，唯一重要的是它們包含正確數量的元素以確保圖像重複正確的次數。

來源

2017-01-23 02:11:51

如何在ng-show中多次顯示相同的元素？

回答

相關問題