Повторите и проблема $ области

Question

Повторите и проблема $ области

0

У меня есть страница, отображающая 3 изображения подряд, используя Ng-repeat, но независимо от того, какое изображение я нажимаю, я вижу только изображение FIRST, отображаемое в этой конкретной строке.

Шаблон:

<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
    <div class="col col-33" ng-if="$index < images.length">
        <div ng-click="seeOne(image)">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
    </div>
    <div class="col col-33" ng-if="$index + 1 < images.length">
        <div ng-click="seeOne(image)">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
    </div>
    <div class="col col-33" ng-if="$index + 2 < images.length">
        <div ng-click="seeOne(image)">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
    </div>
</div>

Функция ng-click:

$scope.seeOne = function (image) {
    window.localStorage['fbid'] = image.fbid;
    $state.go('app.oneimg');
}

$ scope.images:

angular.forEach(value, function (value, key) {
    if (key == 'photo') {
        $scope.images.push({
            id: i,
            fbid: inventorykey,
            src: ("data:image/jpeg;base64," + value)
        });
        i = i + 1;
    }
})

Alexsandra Guerra 29 сен. 2015, в 08:02

Источник

Теги:

javascript

html

angularjs

2 ответа

Ещё вопросы

Cody Haines · Answer 1 · 2015-09-29T04-31-00.000Z

Вы повторяете <div ng-click="seeOne(image)"> 3 раза в этом примере, где image относится только к первому из трех изображений, которые вы показываете. Если вы измените эту строку в соответствии с <img> под ней, вы получите результат, который вы ищете. Что-то вроде этого:

<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0">
    <div class="col col-33" ng-if="$index < images.length">
        <div ng-click="seeOne(images[$index])">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
    </div>
    <div class="col col-33" ng-if="$index + 1 < images.length">
        <div ng-click="seeOne(images[$index+1])">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
    </div>
    <div class="col col-33" ng-if="$index + 2 < images.length">
        <div ng-click="seeOne(images[$index+2])">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
    </div>
</div>

Michael · Answer 2 · 2015-09-29T04-14-00.000Z

{{images[$index].src}} неверно. вместо этого используйте {{image.src}}.

Индекс $ будет меняться на каждой итерации, но есть только одна переменная. поэтому в конце рендеринга все изображения будут такими же, как и ссылки на один и тот же индекс. не имеет значения, какова была ценность при визуализации страницы. Это важно, каково значение в конце фазы углового переваривания.

Для достижения вашего варианта использования вам необходимо установить и использовать локальную переменную в области ng-repeat:

<div id="galscrolldiv" class="row" ng-repeat="image in images" ng-if="$index % 3 === 0" ng-init="myIndex = $index">
    <div class="col col-33" ng-if="$index < images.length">
        <div ng-click="seeOne(image)">
            <img ng-src="{{images[myIndex].src}}" width="100%" />
        </div>
    </div>

Альтернатива: Поместите данные в правильную структуру (2-мерный массив) и используйте вложенный ng-repeat - упрощает вашу жизнь

Я думаю, что вам нужно пересмотреть код. Каждая итерация цикла ng-repeat фактически проходит по 3 изображениям, к которым затем получают доступ images[index] , images[index+1] и images[index+2] .