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 调用 return 一个具有单个属性的对象，称为图像（不是数组）。其次，您没有在 HTML 中访问它，因为那将是 {{ data.images }}，因为您的 $scope 成员被称为 data.

因此，您需要做的第一件事是让 API return 数组。如果你这样做，那么使用这个 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 到 return 一张图片，那么 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不需要改变我上面的内容；

Angularjs 问题 $http.get 不工作

Angularjs issue $http.get not working

javascript

get

http

angularjs

ionic