AngularJS問題$ http.get無法正常工作

Question

我正在使用基於AngularJS構建的ionic框架創建一個移動應用程序。

我正在嘗試從JSON文件將圖像加載到我的應用程序中，但無法使其正確加載。

有人可以幫我嗎？

這是我的HTML：

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25" ng-repeat="image in images">
            <img ng-src="{{images}}" width="100%" />
        </div>
    </ion-content>
</ion-view>

這是我的JavaScript：

.controller("photoCtrl", function($scope, $http) {     
    $scope.data = [];

    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.data = data;
            })
            .error(function() {
                alert("Not working");
            });
    };
});

Answer 1

請更換

<img ng-src="{{image}}" width="100%" />

代替

ng-src="{{images}}"

Answer 2

這里有幾個問題。 首先，您的API調用返回一個具有單個屬性的對象，稱為圖像（不是數組）。 其次，由於您的$scope成員稱為data ，因此您將不會在HTML中訪問它，因為它將是{{ data.images }} 。

因此，您需要做的第一件事是讓API返回一個數組。 如果這樣做，請使用以下HTML：

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25" ng-repeat="image in data.images">
            <img ng-src="{{image}}" width="100%" />
        </div>
    </ion-content>
</ion-view>

而這個JavaScript：

.controller("photoCtrl", function($scope, $http) {
    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/30vuu')
            .success(function(data) {
                $scope.data = data;
            })
            .error(function() {
                alert("Not working");
            });
    };
});

---

如果只希望您的API返回一個圖像，那么HTML就這么簡單：

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">
    <ion-content>
        <div class="col col-25">
            <img ng-src="{{ data.images }}" width="100%" />
            <!-- data.images because that's the name returned by the API call -->
        </div>
    </ion-content>
</ion-view>

JavaScript不需要更改上面的內容；