Réponses du quiz du magasin dans AngularJS

Question

J'essaye de construire un quiz avec AngularJS. Je reçois les questions à montrer comme je l'aime, mais je me demande comment je pourrais stocker la réponse de chaque question à l'objet auquel il est connecté? Je veux que chaque objet obtienne une valeur de yes ou no.

Mon HTML:

<div class="container answerquestions" ng-controller="MainController"> 
    <div class="card text-center"> 
     <div ng-repeat="question in questions"> 
      <div class="card-body" id="{{question.id}}"> 
       <h4 class="card-title">{{settitle}}</h4> 
       <p class="card-text container"></p> 
       <p class="card-text container">{{question.questiontext}}</p> 
       <div class="form-check form-check-inline"> 
        <label class="form-check-label"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Yes </label> 
       </div> 
       <div class="form-check form-check-inline"> 
        <label class="form-check-label"><input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> No </label> 
       </div> 
      </div> 
     </div> 
     <div class="card-footer"> 
      <nav aria-label="Page navigation example" class="pageshower"> 
       <ul class="pagination justify-content-center"> 
        <li class="page-item disabled"> 
         <a class="page-link" href="#" tabindex="-1">Previous</a> 
        </li> 
        <li ng-repeat="question in questions" class="page-item"> 
         <a class="page-link" href="#{{question.id}}">{{question.number}}</a> 
        </li> 
        <li class="page-item disabled"> 
         <a class="page-link" href="#">Next</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</div> 

Mes AngularJS:

app.controller('MainController', ['$scope', function($scope) { 
    $scope.settitle = 'Konflikter'; 
    $scope.questions = [ 
     { 
      number: 1, 
      id: 'a', 
      questiontext: 'Question 1?' 
     }, 
     { 
      number: 2, 
      id: 'b', 
      questiontext: 'Question 2?' 
     }, 
     { 
      number: 3, 
      id: 'c', 
      questiontext: 'Question 3?' 
     } 
    ]; 
}]); 

Answer 1

Vous pouvez utiliser localStorage pour cela: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Utilisation:

var storage = Window.localStorage; 
storage.setItem("question", "value"); 
var question = storage.getItem("question"); 

Answer 2

Vous pouvez essayer la documentation input[radio].

Ensuite, vous devez affecter ng-model = "question.answer". Vous devrez également vous débarrasser de tous les noms et tags d'identification.

 <div class="card-body" id="{{question.id}}"> 
      <h4 class="card-title">{{settitle}}</h4> 
      <p class="card-text container"></p> 
      <p class="card-text container">{{question.questiontext}}</p> 
      <div class="form-check form-check-inline"> 
       <label class="form-check-label"><input ng-model="question.answer" class="form-check-input" type="radio" ng-value="true"> Yes </label> 
      </div> 
      <div class="form-check form-check-inline"> 
       <label class="form-check-label"><input ng-model="question.answer" class="form-check-input" type="radio" ng-value="false"> No </label> 
      </div> 
     </div> 

Exemple dans plunker