Question

我试图将json文件中的图像加载到我的离子应用程序中以创建一个库，但它不起作用。我尝试按照本指南https://blog.nraboy.com/2015/03/make-a-gallery-like-image-grid-using-ionic-framework/进行操作，但改为使用HTTP.GET请求。

HTML：

<ion-content ng-controller="photoCtrl" ng-init="getImages()">
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{data.images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{data.images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{data.images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{data.images[$index + 3].src}" width="100%" />
        </div>
    </div>

使用Javascript：

.controller("photoCtrl", function($scope, $http) {

    $scope.images = [];

    $scope.getImages = function() {
        $http.get('http://myjson.com/3lkge')
            .success(function(data) {
                $scope.images = data.images;
            })
    }

});

Answer 1

因为您没有将图像放到对象$ scope.data.images上。您将它们放在$ scope.images上。在你的html中删除data.images，然后使用图像。您还需要删除索引内容。

//Add listener
    google.maps.event.addListener(marker, "click", function(event) {
      toggleBounce() 
      showInfo(this.position);
    });
    
    function showInfo(latlng) {
      geocoder.geocode({
        'latLng': latlng
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            // here assign the data to asp lables
            document.getElementById('<%=addressStandNo.ClientID %>').value = results[1].formatted_address;
          } else {
            alert('No results found');
          }
        } else {
          alert('Geocoder failed due to: ' + status);
        }
      });
    }

Answer 2

嗯，

这是因为你传递给get请求的链接。

链接：＆＃39; http://myjson.com/3lkge＆＃39; - 是为了网站，而不是直接的json数据。

更正获取请求的json网址：＆＃39; https://api.myjson.com/bins/3lkge＆＃39;

代码应如下所示：

$scope.getImages = function() {
    $http.get('https://api.myjson.com/bins/3lkge')
        .success(function(data) {
            $scope.images = data.images;
        })
}

在您的codepen中测试过它。

Answer 3

在你的html中你的绑定是错误的。

此：

 <img ng-src="{{data.images[$index].src}}" width="100%" />

应该是这样的：

<img ng-src="{{images[$index].src}}" width="100%" />

data.images不在范围内，它是.success方法的本地范围。

Answer 4

您的范围变量不正确。

＆＃34; ng-src＆＃34;属性应绑定到以下内容：

Ionic：为什么我的HTTP.GET没有加载我的图像？

4 个答案: