我制作了一个显示10个问题的测验代码。我希望在页面加载后立即加载该函数。在javascript中,它是onload,这里有角度我在控制器中定义后使用了angular.element(document).ready(function(){....});
。它没有被加载。另外我想知道我的代码是否正确,我在控制器中使用ng-click
提交,当我在javascript中执行程序时,它工作,不确定angularjs。另外请检查checkAnswer()
功能中的foreach是否正确。如果有任何其他错误,请告诉我。
<html ng-app="Swabhav.Quiz">
<head>
<title>Quiz code</title>
<script src="angular.js"></script>
<style>
h1 {
text-align: center;
background-color: lightcoral;
}
#head {
text-decoration: underline;
text-decoration-color: maroon;
}
#select1 {
align-self: center;
text-align: center;
font-family: 'Trebuchet MS';
font-size: 20px;
color: indigo;
margin-top: 30px;
margin-bottom: 50px;
padding: 30px;
}
</style>
</head>
<body>
<div ng-controller="QuizController">
<h1>QUIZ</h1>
<div id="head" ng-bind="head"></div>
<div id="select1" ng-bind="selection"></div>
</div>
<script>
angular.module("Swabhav.Quiz", [])
.controller("QuizController", ["$scope", "$log", function ($scope,
$log) {
angular.element(document).ready(function () {
var choiceA, choiceB, choiceC, choiceD, answer, element,
correct = 0, wrong = 0;
var index = 0, choices, choice, position = 0;
$scope.questions = [
{ question: "How many strokes in the Ashoka Chakra?" },
{ question: "What is 30*2?" },
{ question: " What is largest fish? " },
{ question: "What is the currency of Europe and America
respectively?" },
{ question: "What is the seven wonders of the World
amongst these?" },
{ question: "What is the main source of travel in
Mumbai?" },
{ question: "How many continents in the World?" },
{ question: "What Ocean surrounds India ?" },
{ question: "What station does not come in Mumbai-
Railway-Western-Line?" },
{ question: "Who is the CEO of Google parent company-
Alphabet Inc.?" }
];
$scope.options =
[{ A: "12", B: "24", C: "32", D: "10" },
{ A: "60", B: "50", C: "20", D: "10" },
{ A: "Blue Whale", B: "Megaladon", C: "Hammer-head
shark", D: "All the sharks" },
{ A: "Dollar and Euro", B: "Euro and Dollar", C: "Yen
and Rupees", D: "Rupees and Yen" },
{ A: "Taj Mahal", B: "Great Wall Of China", C: "Victoria
Falls", D: "All of these" },
{ A: "Trains", B: "Aeroplane", C: "Autorickshaw", D:
"Motorcycle" },
{ A: "3", B: "4", C: "5", D: "6" },
{ A: "Indian Ocean", B: "Pacific Ocean", C: "Atlantic
Ocean", D: "Arctic Ocean" },
{ A: "Sandhurst Road", B: "Andheri", C: "Borivali", D:
"Naigaon" },
{ A: "Madhuri Dixit", B: "Narendra Modi", C: "Tim Cook",
D: "Sundar Pichai" }
]
$scope.answers =
[
{ answer: "B" },
{ answer: "A" },
{ answer: "B" },
{ answer: "B" },
{ answer: "D" },
{ answer: "A" },
{ answer: "C" },
{ answer: "A" },
{ answer: "A" },
{ answer: "D" }
]
var row = 0;
$scope.selectQuestion = function (index) {
$scope.choicesIndex = 4;
if (row == $scope.questions.length) {
alert("you have " + correct + " correct answers
and " + wrong + " wrong answers out of 10 !");
return false;
}
$scope.head = "<b>" + "Question " + ++index + " of 10" +
"<b>";
question = $scope.questions[row];
choiceA = options.A[row];
choiceB = options.B[row];
choiceC = options.C[row];
choiceD = options.D[row];
answer = answers.answer[row];
$scope.selection = index + ". " + question + "<br>"
+ "<input type='radio' name='choices' value='A'>" +
choiceA + "<br>"
+ "<input type='radio' name='choices' value='B'>" +
choiceB + "<br>"
+ "<input type='radio' name='choices' value='C'>" +
choiceC + "<br>"
+ "<input type='radio' name='choices' value='D'>" +
choiceD + "<br>";
+"<button type='button' ng-click='checkAnswer()'> Submit
</button>" + "<br>"
}
$scope.checkAnswer = function () {
$scope.choices.push(choiceA);
$scope.choices.push(choiceB);
$scope.choices.push(choiceC);
$scope.choices.push(choiceD);
angular.array.forEach($scope.choices, function (value,
key) {
if ($scope.choicesIndex != 0) {
if
($scope.choices[$scope.choicesIndex].value.checked) {
$scope.selectedChoice =
$scope.choices[$scope.choicesIndex].key;
$log.log("$scope.selectedChoice = " +
$scope.selectedChoice);
$scope.choicesIndex--;
}
}
});
if ($scope.selectedChoice == answer) {
correct++;
}
else if ($scope.selectedChoice == "" ||
$scope.selectedChoice != answer) {
wrong++;
}
row++;
$scope.selectQuestion();
}
});
}]);
</script>
</body>
</html>
答案 0 :(得分:1)
正如@Arash所提到的,你正在以错误的方式编码angularjs。
如果你经历了一些角度开始的拳击手术会更好。
以下是工作angularjs代码
passport-local-mongoose
&#13;