Question

我有一个页面连续显示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;
    }
})

Answer 1

在此示例中，您重复find /path/to/files -name \*.txt | tar -cvf allfiles.tar -T -次3次，其中<div ng-click="seeOne(image)">仅指您正在显示的3张图片中的第一张。如果您更改该行以匹配其下方的image标记，则会获得您正在寻找的结果。像这样：

<img>

Answer 2

{{images[$index].src}}错了。请改用{{image.src}}。

$ index将在每次迭代时改变，但只有一个变量。所以在渲染结束时，所有图像都与引用相同索引相同。呈现页面时的值是什么并不重要。重要的是角度消化阶段结束时的价值。

要实现您的用例，您需要在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>

替代方案：将数据放入适当的结构（2d数组）并使用嵌套的ng-repeat - 让您的生活更轻松

ng-repeat和$ scope问题

2 个答案: