Question

我正在尝试将数据从API提取到Ionic列表中。它目前设置为10个用户的GET详细信息。？结果= 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;
    });
})

制表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>

将数据从API拉入离子列表

1 个答案: