2016-07-12 18 views
0

Ich bin neu in Ionic & Winkel- und es zu lernen, indem Sie das Tutorial Beispiel here

Auf den Code ausgeführt wird, der Controller & Fabrik scheinen um Daten korrekt abzurufen, aber die Elemente sind leer. Wie kann ich das gleiche beheben?

HTML:

<ion-header-bar class="bar-stable"> 
    <h1 class="title">Page 2!</h1> 
</ion-header-bar> 
<ion-content class="padding"> 
    <p>Going to add playlist and video player here</p> 
    <ion-list> 
      <ion-item class="item-avatar" ng-repeat="item in users"> 
       <!--changed to ng-src to fix string problem--> 
       <img ng-src="{{item.user.picture.thumbnail}}"/> 
       <h2>{{item.user.name.first}} {{item.user.name.last}}</h2> 
       <p>{{item.user.location.city}} {{item.user.password}}</p> 
      </ion-item> 
    </ion-list> 
</ion-content> 

-Controller

Added $ scope.users = []; nach here

angular.module('starter.controllers', ['ionic','starter.services']) 

.controller('MainCtrl',function(){ 
    console.log("Main Controller says: Hello World"); 
}) 

.controller('PlaylistCtrl',function($scope, userService){ 
    $scope.users=[]; 
    userService.getPlaylist().then(function(users){ 
     $scope.users = users; 
     console.log($scope.users); 
    }); 
}) 

Dienstleistungen

angular.module('starter.services', ['ionic']) 

.factory('userService', function($http) { 
    return { 
     getPlaylist: function(){ 
      return $http.get('https://randomuser.me/api/?results=10').then(function(response){ 
       return response.data.results; 
      }); 
     } 
    } 

})

Hier ist ein Screenshot: enter image description here

Antwort

0

Hallo nach dem Bild direkt in den Artikel Ihre Werte sind aber in Ihrem HTML-Code erwähnt

<img ng-src="{{item.user.picture.thumbnail}}"/> 

, die es falsch ist, ist kein Benutzerobjekt in Ihrem Array müssen so direkt die Schlüssel nennen wie diese

<img ng-src="{{item.picture.thumbnail}}"/> 

ändern Ihre HTML

<ion-item class="item-avatar" ng-repeat="item in users"> 
       <!--changed to ng-src to fix string problem--> 
       <img ng-src="{{item.picture.thumbnail}}"/> 
       <h2>{{item.name.first}} {{item.name.last}}</h2> 
       <p>{{item.location.city}} {{item.password}}</p> 
      </ion-item> 

enter image description here

+0

Oh! Wow, danke! Habe das überhaupt nicht bemerkt lol! – Meeshu

+0

ha ha glücklich coding @Meeshu –