Angularjs 问题 $http.get 不工作答案

【问题标题】：Angularjs issue $http.get not workingAngularjs 问题 $http.get 不工作
【发布时间】：2015-07-06 11:43:33
【问题描述】：

我正在使用基于 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");
            });
    };
});

【问题讨论】：

您在console 中遇到的错误是什么？
还有ng-repeat="image in images" 到ng-repeat="image in data"
我在控制台中没有收到任何错误。我已将图像更改为数据，但仍然无法正常工作。它应该是数据中的图像吗？
@smither123 @Icycool - 这是ng-repeat="image in data.images"，但前提是 API 返回是固定的。请参阅下面的答案。

标签： javascript angularjs http get ionic

【解决方案1】：

这里有几个问题。首先，您的 API 调用返回一个具有单个属性的对象，称为图像（不是数组）。其次，您没有在 HTML 中访问它，因为那将是 {{ data.images }}，因为您的 $scope 成员被称为 data。

因此，您需要做的第一件事就是让 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 不需要改变我上面的内容；

【讨论】：

感谢您的回复。我创建了一个 codepen：codepen.io/beefman/pen/KpoNjz 我仍然无法让它工作。我希望 api 返回许多图像，但这只是一个示例 json。
@smither123 这是因为您的 API 调用仍然返回一个对象，该对象具有一个名为 images 的属性，该属性是一个字符串而不是数组。 codepen.io/anon/pen/GJxrob

【解决方案2】：

请更改

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

而不是

ng-src="{{images}}"

【讨论】：

将更改为 ??
@smither123 您正在使用 ng-repeat 循环图像，而图像是值。