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

Question

我有两个 json 文件被请求用于两个不同的 angularjs 服务。

• /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 向列表中的其他用户显示了第一个用户的相同任务。

¿如何更改参数以正确更新嵌套的 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

问题出在您的控制器代码中。您对两个循环使用相同的 $scope，这意味着每次调用 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>

Answer 2

有缺陷

.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;
})

代码中的两个服务都使用了有缺陷的 。对于在 .getPeople 函数之外创建的 deferred 对象，promise 只会在第一次解析时解析一次。随后的解析将被忽略，并且承诺始终 return 是第一个值。另外如果XHR有错误，错误信息会丢失。出现错误时，promise 永远不会解析或仅在第一个完成的 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;
});

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