在angularjs工作中使onload功能

时间:2018-03-28 18:25:02

标签: angularjs angularjs-directive

我制作了一个显示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>

1 个答案:

答案 0 :(得分:1)

正如@Arash所提到的,你正在以错误的方式编码angularjs。

如果你经历了一些角度开始的拳击手术会更好。

以下是工作angularjs代码

&#13;
&#13;
passport-local-mongoose
&#13;
&#13;
&#13;