Question

在下面的代码中我试图获取每个问题的子问题列表并在视图中显示它们，但是我在更新每个问题的子问题时遇到问题，它没有更新所以我得到所有问题的相同子问题列表。

如何显示每个问题并列出其下的所有子问题？

  function loadAllQuestionGroup () {
    Questiongroup.query({}).$promise.then(function(group){
        vm.questiongroups = group;
        for(var i=0;i<group.length;i++){
           var grouptitle=group[i].title
            Question.questionsByQuestionGroup({id:group[i].id}).$promise.then(function(question){
                vm.question = question; 
               for(var j=0;j<question.length;j++){    
                  Subquestion.subquestionsByQuestion({id:question[j].id}).$promise.then(function(subquestion){
                      vm.subquestions=subquestion;
                    });                        
              }
         });
        }
      });
    }

 <div ng-repeat="question in vm.question">
   {{question.name}}
   <div ng-repeat="subquestion in vm.subquestions">
     {{subquestion.name}}
   </div>
 </div>

Answer 1

看起来这不是与角度范围相关的问题，它是您遇到问题的纯JavaScript范围。如果在循环中进行异步调用，则每次最后一个元素都会收到。要修复它，你应该使用匿名函数将promise包含在循环中。

检查这个经典示例（你可以认为setTimeout函数等同于你的Question.questionsByQuestionGroup({id:group[i].id}).$promise，它们都是异步函数）

//THIS IS EQUIVALENT TO YOUR CASE
//In this case it will return each time last element, 5 in this case
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  });
}
//Result: 5 5 5 5 5

//THIS IS HOW YOU SHOULD REFACTOR
//Make a wrapper for async, and it will work as needed
for (var j = 0; j < 5; j++) {
  (function(index) {
    setTimeout(function() {
      console.log(index)
    });
  })(j);
}
//Result: 0 1 2 3 4

P.S。在使用包装器修复它之后，您的代码将更加难以理解，更好地将其重构为单独的函数。

Answer 2

个别问题需要推送到问题列表。为每个个别问题创建一个子问题列表。个别子请求需要推送到各自的列表中。

function loadAllQuestionGroup () {
    Questiongroup.query({}).$promise.then(function(group){
        vm.questiongroups = group;
        //Initialize question list
        vm.questionList = [];
        for (var i=0;i<group.length;i++){
            var grouptitle=group[i].title;
            Question
              .questionsByQuestionGroup({id:group[i].id})
              .$promise
              .then(function(question){
                //Push question to list
                vm.questionList.push(question); 
                for (var j=0;j<question.length;j++) {
                    //Initialize subquestion list
                    question.subquestionList = [];
                    Subquestion
                        .subquestionsByQuestion({id:question[j].id})
                        .$promise
                        .then(function(subquestion){
                             //Push subquestion to list
                             question.subquestionList.push(subquestion);
                        })
                   ;                        
                };
              })
            ;
        }
    });
}

子请求交互（ng-repeat）应该在question迭代器上完成。

<div ng-repeat="question in vm.questionList">
   {{question.name}}
   <div ng-repeat="subquestion in question.subquestionList">
     {{subquestion.name}}
   </div>
</div>

请注意subquestionList中每个 question添加了questionList属性。

Angularjs在迭代内更新范围

2 个答案: