2017-01-23 4 views
0

Я играю с карточным приложением, и я хочу, чтобы изображение карты отображалось для каждого экземпляра, который находится в массиве. Чтобы это было просто, я хочу показать card1.png, если массив выглядит как [1,2,3,4,5]. Тем не менее, я хочу, чтобы изображение отображалось дважды, если массив выглядит как [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

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

Вы не должны делать такой расчет в файле вида вообще. Даже если вы можете исправить логику, это очень неэффективно, потому что эта функция будет вызываться *** шесть раз! *** ** каждый раз, когда обнаружено изменение **. Вместо этого вы должны создать массив изображений, которые хотите использовать в своем контроллере, и использовать 'ng-src' или что-то подобное. – Claies

+0

Другими словами, там должны быть две петли здесь, одна для «руки в руках» и одна для «карты в руке». – Claies

+0

Несмотря на мой ответ ниже, я согласен с @Claies. Мы всегда должны делать как можно больше в контроллере. –

ответ

0

После комментариев, которые я получил, это решение я реализовал:

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 и т. Д. Это достигает моей цели показать изображение карты для каждого номера в массив, независимо от его количества.

0

Я не предлагаю это лучшим решение но исправить что вы себе попали (или, по крайней мере, по-видимому, есть) ...

Используйте другое (вложенное) ng-repeat на каждое изображение i nstead от ng-show. Вы должны иметь возможность подключить его к функции getNunbersInArray(n), которая возвращает подмножество основного массива, которое затем может быть закодировано через нужное количество раз.

Например, если у вас есть [1,1,3,4,5] в основном массиве, функция, связанная с новыми ng-repeat с вернется [1,1] (при пропускании 1) и [2] (когда прошло 2) и т.д.

Вы не нужно что-либо делать со значениями, возвращаемыми в этих новых массивах, единственное, что имеет значение, состоит в том, что они содержат правильное количество элементов, чтобы гарантировать, что изображение повторяется правильное количество раз.