Is this the good way to organize code for showing and hiding html depending on root in angularjs

Question

I'm using angular to make a quiz. And I have root for Questions /#/questions/1

I got 6 questions and depending on root i show and hide html for question... Currently my code looks like this

Template

<section ng-class="{active:isActive(1)}">
    Pitanje 1
</section>
<section ng-class="{active:isActive(2)}">
    Pitanje 2
</section>
<section ng-class="{active:isActive(3)}">
    Pitanje 3
</section>
<section ng-class="{active:isActive(4)}">
    Pitanje 4
</section>
<section ng-class="{active:isActive(5)}">
    Pitanje 5
</section>
<section ng-class="{active:isActive(6)}">
    Pitanje 6
</section>

Question controller

$scope.isActive = function(question) {
    return question === Number($routeParams.id);
}

Is there a way to not use hard coded index of a section? Ore something more like in jQuery index...

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Why not use ng-repeat with $index to set this up?

Add in the controller something like

$scope.questionsNumber = new Array(6)

And in the template change to (Psuedo code, not tested, check ng-repeat docs for details):

   <section ng-repeat="i in questionsNumber track by $index" ng-class="{active:isActive($index)}">
       Pitanje {{$index}}
   </section>

You might want/need to use a function instead of a questionsNumber as explained in this question

Is this the good way to organize code for showing and hiding html depending on root in angularjs

1 Answers1