Angular Js, how to change backround of nested repeat data click

Question

I am making a quiz app, as a beginner i facing some problem, I making quiz with more questions and answer in a page like this

1) question ...

a) answer 1 b) answer 2 c) answer 3

2) question ...

a) answer 1 b) answer 2 c) answer 3

Now I want to change background color when a answer will select I have used nested repeat to show the question's and answer here my code

Html

    <section class="quiz_section" ng-controller="quizctrl as quizs">
    <div class="quiz_part" ng-repeat="quiz in quizs.data">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-12">
                    <div class="quiz_title">
                        <h2><span class="quiz_num">Q{{$index+1}}</span> {{quiz.text}} </h2>
                    </div>

                    <div class="quiz_desc">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dui ipsum, fermentum eget vehicula sit amet, suscipit quis justo. Maecenas sagittis aliquet magna ac ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac maximus arcu. </p>
                    </div>
                </div>
            </div>  
            <div class="row no-gutter">
                <div class="col-lg-2 col-sm-4" ng-repeat="quizanswer in quiz.possibilities">
                  <label class="answer" 
                     ng-class="{'bg-info': $parent.$index === quizanswer.activeQuestion }" 
                     ng-click="selectAnswer($parent.$index)">
                       {{quizanswer.answer}}

                  </label>


                </div>

                <div class="col-lg-2 col-sm-4 last">
                    <input type="submit" value="submit">
                </div>
            </div>

        </div>
    </div>

</section>

js

var app = angular.module('myapp');

app.controller('quizctrl', QuizCtrl);

QuizCtrl.$inject = ['QuizData'];

function QuizCtrl(QuizData){
    var vm = this;

    vm.data = QuizData.quizQuestions;

    vm.activeQuestion = 0;

    vm.selectAnswer = selectAnswer;

   function selectAnswer(index){
      vm.activeQuestion = index;

   }    
}

so i want to insert bg-info class to the answer when click please help

acesaft · Accepted Answer · 2018-02-12 00:13:40Z

0

In your ng-class, you are checking

ng-class="{'bg-info': $parent.$index === quizanswer.activeQuestion }"

but you should rather check for

ng-class="{'bg-info': $parent.$index === quizs.activeQuestion }"

because on your selectAnswer function in your Controller (quizs), you are setting the activeQuestion to your index you pass in. in your code you compare $parent.$index with quizanswer.activeQuestion (quizanswer comes from your ng-repeat) instead of quizs.activeQuestion

answered Feb 12, 2018 at 0:13

acesaft

901 silver badge5 bronze badges

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

2 Comments

mdkamrul Over a year ago

I have did a correction here <div class="col-lg-2 col-sm-4" ng-repeat="quizanswer in quiz.possibilities"> <label class="answer" ng-class="{'bg-info': $parent.$index === quizs.activeQuestion }" ng-click="quizs.selectAnswer($parent.$index)"> {{quizanswer.answer}} </label> </div> can you check it please by the way this giveing bg-info class at all answer for a question

acesaft Over a year ago

Sorry i don't understand your question

Collectives™ on Stack Overflow

Angular Js, how to change backround of nested repeat data click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related