將測驗答案存儲在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>

矮人的例子