在 AngularJS 中存储测验答案答案

【问题标题】：Store quiz answers in AngularJS在 AngularJS 中存储测验答案
【发布时间】：2017-09-20 18:30:43
【问题描述】：

我正在尝试使用 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?'
        }
    ];
}]);

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案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");

【讨论】：

【解决方案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中的示例

【讨论】：