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

中的示例

在AngularJS中存储测验答案

2 个答案: