iwus iwus - 1 month ago 5
AngularJS Question

How to use nested ng-repeat to allow access to second list only when first is successfully answered?

I am new in AngularJS and need to develop a questionnaire.
At the beginning we have access only to the question with category A, others are 'read-only'.
To access the question with category B, we need to give the correct answer to the question with category A etc. The order can change: it means that questions with category B can be before A for different reasons.

My logic:

forEach(q in questions){ //iterate all questions
if(q.getCategory() == 'A' && q.isCorrect()){ // I have a function which check if question with category is 'A' and if answer of question with category'A' is correct
for(q in questions){ //as the order of questions can change I need iterate again all question to find question with category 'B'
if(q.getCategory() =='B'){
do something //I want to also change css
}
}
}
};


How do we accomplish that using AngularJS? Should I do this in view or maybe should I create a directive?

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/MyModuleScript.js"></script>
</head>
<body ng-controller="myController">
<div ng-repeat="q in questions">
<span> {{q.content}}</span>
<div ng-if=q.getCategory() == 'A' && q.isCorrect()>
<div ng-repeat="q in questions">
<div if(q.getCategory() =='B') class ="..">
</div>
</div>
</div>
</div>
</body>
</html>

Answer

Try this, to change css you can use ng-class or ng-style.

<div ng-repeat="a in questions | filter:{'category':'A', 'isCorrect': true}">
  <div ng-repeat="b in questions | filter:{'category':'B'}">{{b}}</div>
</div>