Question

我尝试使用Json在API中显示用户列表，但数据不会显示在我的视图中。

这是带工厂和控制器的js文件：

angular.module('ionicApp', ['ionic'])

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

.controller("Page2Ctrl",function($scope, userService){
         userService.getUsers().then(function(users){
                 $scope.users = users;
         });
})

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider

  .state('page2', {
        url: "/page2",
        templateUrl: "templates/page2.html",
        controller: "Page2Ctrl"
  })

$urlRouterProvider.otherwise('/main');
});

...和html模板：

<ion-content class="padding">
      <p>I am Page 2!</p>
      <ion-list>
            <ion-item class="item-avatar" ng-repeat="item in users">
                <img 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>

感谢您的时间

Answer 1

试试这个：

.factory('userService', function($http) {
return {
    getUsers: function(callback){
        $http({
            method: 'GET',
            url: 'https://randomuser.me/api/?results=10'
        }).success(function (response) {
            if(response){
                callback(response.data.results);
            }
        }).error(function () {
            callback(null);
        });
     }
   }
})

.controller("Page2Ctrl",function($scope, userService){
   userService.getUsers(function (data) {
                if (data) {
                    $scope.users = data;
                }
         });
})

Answer 2

我必须使用以下工作答案： {{item.name.first}} {{item.name.last}} 代替 {{item.user.name.first}} {{item.user.name.last}}

离子 - json数据未在模板视图中显示

2 个答案: