Question

我有这样的标记。在我的img ng-init中，我传递了来自ng-repeat的图片值。目前，传递了两个值，然后用于从API中获取数据。

<div class="row" ng-repeat="x in roomdata.data">

    <div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
    </div>
    <h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
    <img  ng-src="{{room_image}}" ng-init=fetchImage(x.image)>

</div>

这是我在fetchImage函数

中的GET方法

$scope.fetchImage = function(value){
            $http({
            method: 'GET',
            url: '&image_id=' + value
        }).then(function (response) {
                var imgdata = response.data;
                var imgdata1 = imgdata.data.image_name;
                $scope.room_image = "/" + imgdata1;

                console.info($scope.room_image);
            });
        };

我的控制台向我显示了两张图片URLS。喜欢

https://uploads/165753081311.08.10-c_ft_p_2_582_379.jpg 
https://uploads/950286957i-ma-ss-1920-800x450.jpg

但是在我看来我使用过的img ng-src={{room_image}}我只能看到第二个网址中的图片

Answer 1

这种情况正在发生，因为第二个值会覆盖第一个值。你应该有x.room_image。另外，请注意我进行了fetchImage(x)更改。像这样：

<div class="row" ng-repeat="x in roomdata.data">

    <div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
    </div>
    <h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
    <img  ng-src="{{x.room_image}}" ng-init=fetchImage(x)>

</div>

所以，fetchImage函数看起来像这样：

$scope.fetchImage = function(x){
    $http({
        method: 'GET',
        url: '&image_id=' + x.image
    }).then(function (response) {
        var imgdata = response.data;
        var imgdata1 = imgdata.data.image_name;
        x.room_image = "/" + imgdata1;
        console.info(x.room_image);
    });
};

显示$ scope对象

1 个答案: