[英]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.