Angularjs update scope inside iteration

Question

In the following code i'm trying to get subquestions list for each question and show them in the view ,but i have problem in updating subquestion for each question,it don't update so I get same subquestion list for all question.

How can I show each question and list all subquestion under it?

  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>

Please try with $scope.$apply() after updating subquestions. — Dede
– Dede, Commented Jul 26, 2016 at 15:56

Luger · Accepted Answer · 2016-07-26 16:18:52Z

1

Looks like it's not an issue related with angular scope, it's pure javascript scope that you have trouble with. If you making asynchronous calls in the loop, you will receive each time the last element. To fix it, you should wrap promises inside loop with anonymous functions.

Check this classic example(you can think that setTimeout function is equivalent of your Question.questionsByQuestionGroup({id:group[i].id}).$promise, they are both async functions)

//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. After you will fix it with wrappers, your code will be even more unreadable, better to refactor it to separate functions.

edited Jul 26, 2016 at 16:18

answered Jul 26, 2016 at 16:13

Luger

2,1301 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali-Alrabi Over a year ago

I did and index print 0,1,2,3 but scope still don't update

Luger Over a year ago

@Ali-Alrabi also one thing I noticed, you are assigning subquestion to array: vm.subquestions=subquestion; if you want to have array of different items, you should push it not assign

georgeawg · Accepted Answer · 2016-07-26 21:14:48Z

Individual questions need to be pushed to a question list. Create a subquestion list for each individual question. Individual subquestions need to be pushed to their respective lists.

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

Subquestion interation (ng-repeat) should be done on the question iterator.

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

Notice that a subquestionList property was added to each question in the questionList.

Collectives™ on Stack Overflow

Angularjs update scope inside iteration

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related