更改嵌套ng重复中的$http参数

Change $http parameter in nested ng-repeat

本文关键字:http 参数 嵌套 ng      更新时间:2023-09-26

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

  • /people.json
    • {用户名,用户id}
  • /task.json
    • {name task,task id,responsible id}
Where responsible id=user-id

我可以向任务json传递一个ID参数,为ID为/task.json的用户请求所有任务?ID=12

我试图创建一个嵌套的ng repeat,第一个是在/people.json中获取所有用户,第二个是在循环中获取每个用户的所有任务,但我最终得到了这样的结果:https://i.stack.imgur.com/P2YZp.png

第一个ng重复正确地显示不同的用户,但第二个向列表中的其他用户显示第一个用户的相同任务。

?如何更改参数以正确更新嵌套的ng重复

我的服务:

    .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>

谨致问候。

问题出在控制器代码中。两个循环都使用相同的$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>

有缺陷的$q.defer防图案1

.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反模式。对于在.getPeople函数之外创建的deferred对象,promise将只在第一次解析时解析一次。随后的解析被忽略,promise始终返回第一个值。此外,如果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;
});

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