Currently, I am utilizing Angular to create a quiz. The root for Questions is /#/questions/1.
With a total of 6 questions, I am displaying and hiding HTML for each question based on the root. Here is how my code appears:
Template
<section ng-class="{active:isActive(1)}">
Question 1
</section>
<section ng-class="{active:isActive(2)}">
Question 2
</section>
<section ng-class="{active:isActive(3)}">
Question 3
</section>
<section ng-class="{active:isActive(4)}">
Question 4
</section>
<section ng-class="{active:isActive(5)}">
Question 5
</section>
<section ng-class="{active:isActive(6)}">
Question 6
</section>
Question controller
$scope.isActive = function(question) {
return question === Number($routeParams.id);
}
Is there a more dynamic way of avoiding the use of hard-coded section indexes? Perhaps something along the lines of the jQuery index functionality?