javascript - 更改嵌套 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.

I can pass an ID parameter to the task json to request all the task for the user with that ID: /task.json?ID=12

I'm trying to create a nested ng-repeat, the first one to get all the users in /people.json, the second to get all the task for each user in the loop but i ended up with something like this: /image/P2YZp.png

The first ng-repeat shows correctly the different users, but the second show the same tasks of the first user to the others users in the list.

¿How can i change the parameter to update correctly for the nested ng-repeat?

My Services:

    .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

.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

问题出在您的 Controller 代码中。您在两个循环中使用相同的 $scope，这意味着每次调用 taskObjects() 时，您都会覆盖 $scope.userTasklist带有新的任务列表。您应该为循环中的每个实例建立一个新作用域，或者应该将 $scope.userTasklist 设为属性与 person.id 匹配的对象。

在您的 Controller 中更改:

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

然后在您的 View 中使用:

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