Problem with retrieving array over $http and view in ion-item of ion-list

ionic-v1
1

Total beginner’s problem here.

Like the title says, I’m trying to assign a list from a $http request and then see that list in a view.

I believe the problem is the view is shown before the data loads, if I understand ionic correctly. And the view is never updated when the variables change.

I’m told resolves are one way of fixing this but I’d prefer for the view to change and then show a loading indicator while it waits for the http request to finish, and then show the list.

Loading the data is through ng-init in the html file definitely seems wrong.

view html file:

<ion-view view-title={{ListName}} ng-init="getList()">
    <ion-content ng-controller="ListCtrl">
        <ion-list>
            <ion-item ng-repeat="item in list"
                      class="item-thumbnail-left">

                {{item.id}}
               <img ng-src="{{item.thumbnail}}">
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

controller snippet:

.controller('ListCtrl', function($scope){
  $scope.list = []
  $scope.ListName = ''


  $scope.getList = function(){
     $scope.ListName = 'list'

     $scope.list = [{id: 1, thumbnail:null}, {id: 2, thumbnail:null},{id: 3, thumbnail:null} ,{id: 4, thumbnail:null}]

}

})

the list is actually gotten in a http request that returns a promise but this gives me the same problem. It’s something annoyingly basic that I just don’t understand about ionic yet.

Thanks!

2

Apparently all I needed to do was move the ng-controller to the ion-view

3

Yep. Having the ng-controller on the ion-content will isolate the functionality to anything inside the ion-content. So how’s ion-view suppose to know what to do with ng-init?

You could also move the controller to the state provider and get rid of the ng-init