將數據從API提取到離子列表中

Question

我正在嘗試將數據從API提取到離子列表中。 當前設置為GET 10個用戶的詳細信息。 結果= 10

當我指定要打印結果數組中的哪個元素時，將在列表中打印所有所需的詳細信息，例如{{result.results [0] .picture.thumbnail}}，但將[0]元素重復10次（數組的長度） ）

當我不指定哪個元素並嘗試打印整個數組時，我會收到10個空列表項。

**我非常感謝Angular和Ionic框架，在此先感謝:)

controller.js

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

.controller('DashCtrl', function($scope, $http) {
  $scope.result = [];
  $http.get('https://randomuser.me/api/?results=10')
    .success(function(data, status, headers,config){
      console.log('data success');
      console.log(data); // for browser console
      $scope.result = data; // for UI
    })
    .error(function(data, status, headers,config){
      console.log('data error');
    })
    .then(function(result){
      things = result.data;
    });
})

tab-dash.html

<ion-list>
<ion-item ng-repeat="results in result.results" 
        <ion-avatar item-left>
<img src="{{result.results[0].picture.thumbnail}}">
        </ion-avatar>
 <h2>
   {{result.results.name.first}}
   {{result.results[0].name.last}}
 </h2>

  <p>{{result.results[0].email}}</p>

  </ion-item>
 </ion-list>

Answer 1

試試這個：

<ion-list>
  <ion-item ng-repeat="result in result.results" 
    <ion-avatar item-left>
      <img src="{{result.picture.thumbnail}}">
    </ion-avatar>
    <h2>
      {{result.name.first}}
      {{result.name.last}}
    </h2>
    <p>{{result.email}}</p>
  </ion-item>
</ion-list>