在嵌套的ng-repeat中更改$ http参数

Question

我为两个不同的angularjs服务请求了两个json文件。

  

  
• /people.json      
    
  • {user-name，user-id}
    
  
• /task.json      
    
  • {name-task，task-id，responsible-id}
    
    
  

Where responsible-id = user-id.

我可以将ID参数传递给任务json，以便为具有该ID的用户请求所有任务：/task.json？ID = 12

我正在尝试创建一个嵌套的ng-repeat，第一个用于获取/people.json中的所有用户，第二个用于获取循环中每个用户的所有任务但是我最终得到了类似这样的东西：http://i.imgur.com/xgG0K7i.png

第一个ng-repeat正确显示不同的用户，但第二个显示第一个用户与列表中其他用户相同的任务。

¿如何更改参数以正确更新嵌套的ng-repeat？

我的服务：

    .service('TeamworkPeopleSrvc', function($http, $q){
      var deferred = $q.defer();
      var TeamworkPeopleSrvc = this;
      TeamworkPeopleSrvc.getPeople = function(){
        $http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
        $http({
          method: 'GET',
          url: 'http://projects.com/people.json',
          params: { 'pageSize':'5'},
        })
        .then(function(response) {
          deferred.resolve(response);
        });
          return deferred.promise;
      };
      return TeamworkPeopleSrvc;
    })
  .service('TeamworkTasksSrvc', function($http, $q){
      var deferred = $q.defer();
      var TeamworkTasksSrvc = this;
      TeamworkTasksSrvc.getTasks = function(id){
        $http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
        $http({
          method: 'GET',
          url: 'http://projects.com/tasks.json' ,
          params: { 'id':id, 'getSubTasks':'no', 'pageSize':'10'},
        })
        .then(function(response) {
          deferred.resolve(response);
        });
          return deferred.promise;
      };
      return TeamworkTasksSrvc;

    })

我的控制器

.controller('PeopleCtrl', function ($scope, TeamworkPeopleSrvc, TeamworkTasksSrvc) {
  $scope.init = function(){
    $scope.peopleObjects();
  };

  $scope.taskObjects = function(id){
    TeamworkTasksSrvc.getTasks(id)
    .then(function(response){
      $scope.userTasklist = response.data['todo-items'];
    });
  };

  $scope.peopleObjects = function(){
    TeamworkPeopleSrvc.getPeople()
    .then(function(response){
      $scope.userlist = response.data.people;
    });
  };

  $scope.init();
});

并尝试使用模板

中更新的用户ID初始化任务

  <div ng-controller="PeopleCtrl">
    <div ng-repeat="person in userlist">
      <h3>{{person['id']}} | {{person['first-name']}} {{person['last-name']}}</h3>

      <div ng-init="taskObjects(person['id'])">
        <div ng-repeat="task in userTasklist">
        {{task['responsible-party-id']}} - {{task['content']}}
        </div>
      </div>
    </div>
  </div>

最诚挚的问候。

Answer 1

问题在于您的控制器代码。您对两个循环使用相同的taskObjects()，这意味着每次调用$scope.userTasklist时，您都会使用新的任务列表覆盖$scope.userTasklist。您应该为循环中的每个实例建立一个新范围，或者您应该使person.id一个属性与 $scope.taskObjects = function(id){ TeamworkTasksSrvc.getTasks(id) .then(function(response){ if(!$scope.userTasklist) { $scope.userTasklist = {}; } $scope.userTasklist[id] = response.data['todo-items']; }); }; 匹配的对象。

在您的控制器中更改：

  <div ng-controller="PeopleCtrl">
    <div ng-repeat="person in userlist">
      <h3>{{person['id']}} | {{person['first-name']}} {{person['last-name']}}</h3>

      <div ng-init="taskObjects(person['id'])">
        <div ng-repeat="task in userTasklist['id']">
        {{task['responsible-party-id']}} - {{task['content']}}
        </div>
      </div>
    </div>
  </div>

然后在您的视图中使用：

{{1}}

Answer 2

瑕疵$q.defer Anti-Pattern ¹

.service('TeamworkPeopleSrvc', function($http, $q){
  var deferred = $q.defer();
  var TeamworkPeopleSrvc = this;
  TeamworkPeopleSrvc.getPeople = function(){
    $http.defaults.headers.common['Authorization'] = 'Basic ' + window.btoa('mycustomapikey' + ':' + 'X');
    $http({
      method: 'GET',
      url: 'http://projects.com/people.json',
      params: { 'pageSize':'5'},
    })
    .then(function(response) {
      deferred.resolve(response);
    });
      return deferred.promise;
  };
  return TeamworkPeopleSrvc;
})

代码中的两项服务都使用有缺陷的$q.defer Anti-Pattern。在deferred函数之外创建.getPeople对象时，只有第一个解析才会解析promise。后续解析将被忽略，并且promise始终返回第一个值。此外，如果XHR有错误，则错误信息丢失。如果出现错误，承诺永远不会在第一次履行的XHR中解决或解决。

在没有$q.defer

的情况下实施

.service('TeamworkPeopleSrvc', function($http, $q){
    var TeamworkPeopleSrvc = this;
    TeamworkPeopleSrvc.getPeople = function(){
        var authHeader = { Authorization: 'Basic ' +
              window.btoa('mycustomapikey' + ':' + 'X')
        };
        var httpPromise = ($http({
            method: 'GET',
            url: 'http://projects.com/people.json',
            headers: authHeader,
            params: { 'pageSize':'5'},
            })
        );
        return httpPromise;
    };
    return TeamworkPeopleSrvc;
});

要正确实现服务，只需返回$http服务返回的承诺。每次调用$http函数时都会创建一个新的promise，并且将正确保留错误信息。