iwus iwus - 1 year ago 48
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">
<script src="Scripts/angular.js"></script>
<script src="Scripts/MyModuleScript.js"></script>
<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 ="..">

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download