AngularJS:决策树实现 | selects
本文介绍了AngularJS:决策树实现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我正在尝试编写一个测验应用程序.以下是源代码.目前它的工作方式如下:
点击开始测验，第一个问题出现. 用户选择正确的选项，然后移动到第 3 题. 如果用户选择了错误的选项，它会移动到另一个问题，比如问题编号 4. 等等...
请检查链接http://plnkr.co/edit/sYG9jjX0JATbQhJ1hNf6
我想要实现的目标如下:
点击开始测验，第一个问题出现. 用户选择正确的选项，然后移动到第 3 个问题.此时，屏幕上有两个问题(第一和第三). 现在假设用户更改了第一个问题中的选项并选择了任何其他答案，第三个问题应该关闭并显示另一个问题(比如问题编号 4). 如果用户已经浏览了 3-4 个问题，然后更改了说第一个问题的选项，则应该只显示下一个可能的问题，而不是所有 3-4 个问题. 请找到以下代码:
index.html
<html ng-app="quizApp"><头><meta charset="utf-8"/><title>测验应用</title><link rel="stylesheet" href="style.css"/><script src="http://code.jquery.com/jquery-2.0.3.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><script src="app.js"></script><身体><div class="容器"><h1 class="title">QuizApp</h1><测验/>
模板.html
<div ng-show="!quizOver" ng-repeat="option1 有问题" ng-init="parentIndex = $index"><h2 id="问题">{{option1.question}}</h2><div id="选项"><div ng-model="selected" ng-repeat="option1.options 中的选项"><标签><input type="radio" ng-value="option.name" ng-model="option.selectedRadio" name="myName{{$parent.$index}}">{{option.name}}
<div><button ng-click="checkAnswer(option1)" class="next-question">下一步</button>
<div ng-show="quizOver"><h2>测验结束</h2><button ng-click="reset()">再次播放</button>
<div id="分数">得分:{{得分}}
<div class="intro" ng-show="!inProgress"><p>欢迎使用测验应用程序</p><button id="startQuiz" ng-click="start()">开始测验</button>
app.js
var app = angular.module('quizApp', []);app.directive('quiz', function(quizFactory) {返回 {限制:'AE'，范围: {}，templateUrl: 'template.html',链接:功能(范围，元素，属性){scope.start = function() {范围.id = 0;范围.score = 0;scope.question = [];scope.quizOver = false;scope.inProgress = true;范围.getQuestion();};scope.reset = function() {scope.inProgress = false;范围.score = 0;}scope.getQuestion = function() {var q = quizFactory.getQuestion(scope.id);控制台日志(q)；如果 (q) {范围.对象 = {'问题':q.question，'选项':q.options，'答案':q.answer，'trueQId': q.trueQId,'falseQid': q.falseQid,'answerMode':真，答案":q.answers}scope.question.push(scope.object);控制台日志(范围.问题)；} 别的 {scope.quizOver = true;}};scope.checkAnswer = 函数(问题){var 选项 = question.options;for (var i = 0; i < options.length; i++) {如果(选项[i].selectedRadio){var ans = options[i].selectedRadio;}}console.log(question.options[question.answer]);if (question.options[question.answer].name == ans) {控制台日志(ans)；范围.score++;scope.question[scope.id].answerMode = false;scope.answerMode = false;范围.id++;范围.getQuestion();}};}}});app.factory('quizFactory', function() {var 问题 = [{问题:世界上人口最多的国家是哪个?"，选项: [{name: "印度",选择:假}, {名称:美国"，选择:假}, {名称:中国"，选择:假}, {名称:俄罗斯"，选择:假}],答案:2、真QId:1，falseQid: 3,答案:"}, {问题:第二次世界大战何时结束?"，选项: [{名称:1945"，选择:假}, {名称:1934"，选择:假}, {名称: "1993",选择:假}, {名称: "2002",选择:假}],答案:0，真QId:2，falseQid:3}, {问题:第一个发行纸币的国家是哪个?"，选项: [{名称:美国"，选择:假}, {name: "法国",选择:假}, {name: "意大利",选择:假}, {名称:中国"，选择:假}],答案:3、真QId:3，falseQid:4}];返回 {获取问题:功能(ID){控制台日志(问题)；if (id < questions.length) {返回问题[id];} 别的 {返回假；}},更新问题:函数(id，ans){问题[id].answers = ans;}};}); 解决方案
像这样改变你的 checkAnswer 函数
scope.checkAnswer = function(question) {控制台日志(问题)；var 选项 = question.options;for (var i = 0; i < options.length; i++) {如果(选项[i].selectedRadio){var ans = options[i].selectedRadio;}}console.log(question.options[question.answer]);if (question.options[question.answer].name == ans) {控制台日志(范围.id)；范围.score++;scope.question[scope.id].answerMode = false;scope.answerMode = false;范围.id++;范围.getQuestion();}别的{scope.question=scope.question.slice(0,question.trueQId);控制台日志(范围.问题)；scope.id=question.falseQid-1;范围.getQuestion();}};它会让你理解，如何去做..谢谢
I am trying to write a quiz app.Below is the source code.Currently it is working like as below :
On Click start Quiz,first questions shows up. User selects correct option and it moves to say question number 3. if User selects wrong option,it moves to another question say question number 4. and so on...
Please check link http://plnkr.co/edit/sYG9jjX0JATbQhJ1hNf6
What I want to achieve is as below :
On Click start Quiz,first questions shows up. User selects correct option and it moves to say question number 3.Now at this time,there are two questions on the screen(1st and 3rd). Now say user changed the option in 1st question and selected any other answer,3rd question should go off and another question(say question number 4) should be displayed. If user has already browsed through 3-4 questions and then changes option of say first question then only next possible question should be displayed and not all 3-4 questions. Please find below code :
index.html
<!DOCTYPE html>
<html ng-app="quizApp">
<head>
<meta charset="utf-8" />
<title>QuizApp</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<h1 class="title">QuizApp</h1>
<quiz/>
</div>
</body>
</html>
template.html
<div class="quiz-area" ng-show="inProgress">
<div ng-show="!quizOver" ng-repeat="option1 in question" ng-init="parentIndex = $index">
<h2 id="question">{{option1.question}}</h2>
<div id="options">
<div ng-model="selected" ng-repeat="option in option1.options">
<label>
<input type="radio" ng-value="option.name" ng-model="option.selectedRadio" name="myName{{$parent.$index}}">
{{option.name}}
</label>
</div>
</div>
<div>
<button ng-click="checkAnswer(option1)" class="next-question">Next</button>
</div>
</div>
<div ng-show="quizOver">
<h2>Quiz is over</h2>
<button ng-click="reset()">Play again</button>
</div>
<div id="score">
Score: {{score}}
</div>
</div>
<div class="intro" ng-show="!inProgress">
<p>Welcome to the QuizApp</p>
<button id="startQuiz" ng-click="start()">Start the Quiz</button>
</div>
app.js
var app = angular.module('quizApp', []);
app.directive('quiz', function(quizFactory) {
return {
restrict: 'AE',
scope: {},
templateUrl: 'template.html',
link: function(scope, elem, attrs) {
scope.start = function() {
scope.id = 0;
scope.score = 0;
scope.question = [];
scope.quizOver = false;
scope.inProgress = true;
scope.getQuestion();
};
scope.reset = function() {
scope.inProgress = false;
scope.score = 0;
}
scope.getQuestion = function() {
var q = quizFactory.getQuestion(scope.id);
console.log(q);
if (q) {
scope.object = {
'question': q.question,
'options': q.options,
'answer': q.answer,
'trueQId': q.trueQId,
'falseQid': q.falseQid,
'answerMode': true,
'answers': q.answers
}
scope.question.push(scope.object);
console.log(scope.question);
} else {
scope.quizOver = true;
}
};
scope.checkAnswer = function(question) {
var options = question.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selectedRadio) {
var ans = options[i].selectedRadio;
}
}
console.log(question.options[question.answer]);
if (question.options[question.answer].name == ans) {
console.log(ans);
scope.score++;
scope.question[scope.id].answerMode = false;
scope.answerMode = false;
scope.id++;
scope.getQuestion();
}
};
}
}
});
app.factory('quizFactory', function() {
var questions = [{
question: "Which is the largest country in the world by population?",
options: [{
name: "India",
selected: false
}, {
name: "USA",
selected: false
}, {
name: "China",
selected: false
}, {
name: "Russia",
selected: false
}],
answer: 2,
trueQId: 1,
falseQid: 3,
answers: ""
}, {
question: "When did the second world war end?",
options: [{
name: "1945",
selected: false
}, {
name: "1934",
selected: false
}, {
name: "1993",
selected: false
}, {
name: "2002",
selected: false
}],
answer: 0,
trueQId: 2,
falseQid: 3
}, {
question: "Which was the first country to issue paper currency?",
options: [{
name: "USA",
selected: false
}, {
name: "France",
selected: false
}, {
name: "Italy",
selected: false
}, {
name: "China",
selected: false
}],
answer: 3,
trueQId: 3,
falseQid: 4
}];
return {
getQuestion: function(id) {
console.log(questions);
if (id < questions.length) {
return questions[id];
} else {
return false;
}
},
updateQuestion: function(id, ans) {
questions[id].answers = ans;
}
};
});
解决方案
Change Your checkAnswer function like this
scope.checkAnswer = function(question) {
console.log(question);
var options = question.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selectedRadio) {
var ans = options[i].selectedRadio;
}
}
console.log(question.options[question.answer]);
if (question.options[question.answer].name == ans) {
console.log(scope.id);
scope.score++;
scope.question[scope.id].answerMode = false;
scope.answerMode = false;
scope.id++;
scope.getQuestion();
}else{
scope.question=scope.question.slice(0,question.trueQId);
console.log(scope.question);
scope.id=question.falseQid-1;
scope.getQuestion();
}
};
It will give you understanding ,How to do it .. Thanks
这篇关于AngularJS:决策树实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-13 19:24