$http.get not working correctly?

ionic-v1
1

I’m trying to load an image into my application from a JSON file but i cannot get it to load correctly.

Could anybody help me out?

Here’s my code:

Heres my HTML:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" ng-init="getImages()">

    <div class="col col-25" ng-repeat="image in images">
        <img ng-src="{{images}}" width="100%" />
    </div>

</ion-content>
</ion-view>

Heres my 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");
    })

  }

});
2

Your JSON is returning

{"images":"http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg"}

In the HTML you are doing ng-src={{images}} but not assigning the image link anywhere

In your controller, you should do:

$scope.images = data.images instead of $scope.data=data

3

In my HTML should it be <span ng-bind-html="images"> instead? Would that work?

I have changed my controller. Thanks.

4

I have made a codepen: http://codepen.io/beefman/pen/KpoNjz

5

I wrote up a quick simple codepen