簡體   English   中英

如何通過angularjs在單選按鈕上存儲用戶的操作?

[英]How to store user's actions on radio buttons via angularjs?

我正在使用angularjs,ef和asp.net 5制作測驗單頁應用程序。Angularjs使用幾天了,有一件我無法解決的事情,我將盡力解釋。

因此,在主頁上我已測驗了問題和單選按鈕(是或否),當我按下其中一個按鈕時,請單擊下一個以回答下一個問題,然后返回以查看第一個問題是否得到回答,單選按鈕剛剛刷新。 所以問題是如何保存用戶選擇的單選按鈕上的選項?

的HTML:

<div class="body-content text-center" ng-controller="QuizController">
    <ul>
        <li ng-repeat="q in questions">
            <h2>{{q.Id}}. {{q.Question}}</h2>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> {{q.isTrue}}
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> {{q.isFalse}}
            </label>
        </li>
    </ul>
    <button type="button" class="btn btn-primary" ng-click="prevQuestion()">Prev</button>
    <button type="button" class="btn btn-primary" ng-click="nextQuestion()">Next</button>
    <button type="submit" class="btn btn-primary"ng-click="onSubmit()">Submit</button>

</div>

angularjs控制器:

function controller($scope, quizService) {
        $scope.questions = [];

        updQuestion();

        function updQuestion() {
            var id = 1;

            quizService.getQuestions(id).success(function (data) {
                $scope.questions = data;
            });

            $scope.nextQuestion = function () {
                id++;
                quizService.getQuestions(id).success(function (data) {
                    $scope.questions = data;
                });
            };

            $scope.prevQuestion = function () {
                id--;
                quizService.getQuestions(id).success(function (data) {
                    $scope.questions = data;
                });
            };
        }
    }

和角度服務:

function getQuestions(id) {
    return $http.get('/api/quiz/' + id);
}

通過將數組添加到angularjs可以解決問題,例如:

    $scope.binding = {
        answers: {}
    };

然后在此,我提交我的答案:

    $scope.setAnswer = function (answer, id) {
        $scope.binding.answers[id] = answer;
    };

在html上之后,在單選按鈕中需要添加以下內容:

ng-model="currentAnswer" ng-value="true" ng-click="setAnswer(true, q.Id)"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM