Question

我尝试显示部分服务器列表，但不明白为什么他没有将它们写入数组。我尝试将其推送到数组然后在html中显示它使用ng-repeat，但它不起作用，因为我没有尝试过。

var app = angular.module('myApp', []);
app.factory("demoFac", ['$http',function($http){
    var obj = {};
    for(id = 10; id < 16; id++){
        obj.fetchUserDetails = function(){
            return $http.get('http://jsonplaceholder.typicode.com/photos/' + id);
        }
        return obj;
    }

}]);

app.controller('customersCtrl',function(demoFac){
    var Picture = this;

    Picture.list = [];

    demoFac.fetchUserDetails().success(function(response){
        Picture.list.push({id: response.id,title:response.title, url: response.url, thumbnailUrl: response.thumbnailUrl})
    });

    console.log(Picture.list);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl as Picture" ng-cloak> 
    <div ng-repeat="x in    Picture.list ">
    <h4>{{'id:'+x.id}}</h4>

    <h3>{{x.title}}</h3>
    <h4>{{x.url}}</h4>
    <h4>{{x.thumbnailUrl}}</h4>
    <img ng-src="{{x.thumbnailUrl}}">
    <img ng-src="{{x.url}}">
</div>
</div>

我尝试了不同的方法，但结果是一样的，不明白我做错了什么？

Answer 1

实际上它不是空的，如果你看到网络选项卡响应带有1个元素..它显示为空，因为在调用成功回调的时候，console.log语句已经被执行，初始值为[ ]

我知道然后为什么它第一次显示1个元素，因为不管你是否认为chrome的开发人员工具控制台的行为有点不同，它会在你打开它们之后评估你的日志或类似的东西。我之前遇到过同样的问题，并在其中一个答案中找到了这个问题。

只是为了证明在Firefox中运行它，你总会发现日志为空数组。

Answer 2

此代码将解决您的问题：

＆＃13;

var app = angular.module('myApp', []);
app.factory("demoFac", ['$http', '$q',
  function($http, $q) {
    var obj = {};

    obj.fetchUserDetails = function() {
      var promises = [];
      for (id = 10; id < 16; id++) {
        var promiss = $http.get('http://jsonplaceholder.typicode.com/photos/' + id);
        promises.push(promiss);
      }
      return $q.all(promises);
    }
    return obj;
  }
]);

app.controller('customersCtrl', ['demoFac',
  function(demoFac) {
    var Picture = this;

    Picture.list = [];

    demoFac.fetchUserDetails().then(function(response) {
      for (var i = 0; i < response.length; i++) {
        Picture.list.push({
          id: response[i].data.id,
          title: response[i].data.title,
          url: response[i].data.url,
          thumbnailUrl: response[i].data.thumbnailUrl
        });
      }
    });

    console.log(Picture.list);
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl as Picture" ng-cloak>
  <div ng-repeat="x in 	Picture.list ">
    <h4>{{'id:'+x.id}}</h4>

    <h3>{{x.title}}</h3>
    <h4>{{x.url}}</h4>
    <h4>{{x.thumbnailUrl}}</h4>
    <img ng-src="{{x.thumbnailUrl}}">
    <img ng-src="{{x.url}}">
  </div>
</div>

＆＃13;

您将fetchUserDetails设置为仅获取最后一项（ID为15），因为您在for循环中一遍又一遍地重置obj.fetchUserDetails。我所做的是在fetchUserDetails中移动for循环，并通过$ q.all（）将每个调用的所有promise收集到一个promise中。新的统一承诺已在customersCtrl中使用。一旦所有承诺得到解决，统一承诺将起作用。

Angularjs $ http.get（）。 JSON前端服务器

2 个答案: