将数据从 API 拉入 Ionic 列表

Question

我正在尝试将数据从 API 提取到 Ionic 列表中。当前设置为获取 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>