在AngularJS中存儲測驗答案

Question

我正在嘗試使用AngularJS構建測驗。我按照自己喜歡的方式提出問題，但想知道如何將每個問題的答案存儲到它所連接的對象？我希望每個對象獲得值爲yes或no。

我的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> 

我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

您可以使用localStorage此： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

用法：

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

Answer 2

您可以嘗試查看input[radio]文檔。

然後你會分配ng-model =「question.answer」。您還需要刪除所有名稱和ID標籤。

 <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> 

實例plunker