Angularjs проблема $ http.get не работает

Question

Angularjs проблема $ http.get не работает

0

Я создаю мобильное приложение, использующее систему ionic, которая построена на AngularJS.

Я пытаюсь загрузить изображение в свое приложение из файла 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");
            });
    };
});

smither123 06 июль 2015, в 14:36

Источник

Теги:

javascript

angularjs

http

get

ionic

2 ответа

1

Пожалуйста измените

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

вместо

ng-src="{{images}}"

Vineet 06 июль 2015, в 09:33

0

Замените <img ng-src = "{{images}}" width = "100%" /> на <img ng-src = "{{image}}" width = "100%" /> ??
smither123 06 июль 2015, в 12:05
0

@ smither123 вы зацикливаете изображения с помощью ng-repeat, а image - это значение.
I'm nidhin 06 июль 2015, в 12:16

Ещё вопросы

Замените <img ng-src = "{{images}}" width = "100%" /> на <img ng-src = "{{image}}" width = "100%" /> ??
@ smither123 вы зацикливаете изображения с помощью ng-repeat, а image - это значение.

kiswa · Accepted Answer · 2015-07-06T09-40-00.000Z

Здесь есть несколько вопросов. Во-первых, ваш вызов API возвращает объект с единственным свойством, называемым образами (а не массивом). Во-вторых, вы не {{ data.images }} доступ к нему в своем 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 the name returned by the API call -->
        </div>
    </ion-content>
</ion-view>

JavaScript не нуждается в изменении от того, что у меня выше;

Спасибо за ответ. Я создал кодовый блок: codepen.io/beefman/pen/KpoNjz. Я до сих пор не могу заставить его работать. Я хотел бы, чтобы API вернул много изображений, но это всего лишь пример JSON.
@ smither123 Это потому, что ваш вызов API по-прежнему возвращает объект со свойством images, который является строкой, а не массивом. codepen.io/anon/pen/GJxrob