代码之家  ›  专栏  ›  技术社区  ›  user5854648 Kailash Karki

无法更新angularjs输入值

  •  0
  • user5854648 Kailash Karki  · 技术社区  · 8 年前

    我试图添加我自己的自旋在盎格鲁JS教程,我做了一个土星问答,改变它从多项选择,以填补空白测验。

    我可以得到第一个答案来识别它是对是错,但下一个问题总是返回错误,即使答案是对的。通过使用console.log,我发现angularjs无法识别经过更改的输入值。它总是保留我在测试中投入的第一个值。

    Plunkr Demo

    HTML

    <div id="myQuiz" ng-controller="QuizController">
        <h1>Test Your Knowledge:<span>Saturn</span></h1>
        <div class="progress">  
            <div class="{{ ($index === activeQuestion) ? 'on' : 'off' }} 
                {{ (myQuestion.questionState === 'answered') ? 'answered' : 'unanswered' }}
                {{ (myQuestion.correctness === 'correct') ? 'correct' : 'incorrect' }}" 
                ng-repeat="myQuestion in myQuestions">
            </div>
        </div>
    
        <div class="intro {{ (activeQuestion > -1) ? 'inactive' : 'active' }}"> 
            <h2>Welcome</h2>
            <p>Click to begin to test your knowledge of Saturn.</p>
            <p class="btn" ng-click="activeQuestion = 0">Begin</p>
        </div>
    
        <div class="question
            {{ $index === activeQuestion ? 'active' : 'inactive' }}
            {{ myQuestion.questionState === 'answered' ? 'answered' : 'unanswered' }}" 
            ng-repeat="myQuestion in myQuestions">
            <p class="txt"> {{ myQuestion.instructions }} </p>
            <div class="txt" ng-bind-html="myQuestion.question | trustAsHtml">
            </div>  
    
            <p class="ans" 
                ng-class="{  
                    correct:isCorrect($index, $index)}"
                ng-click="checkAnswer($index, $index)">Check Answer 
            </p>
    
            <div class="feedback">
                <p ng-show="myQuestion.correctness === 'correct'"><strong>Correct</strong>.</p>
                <p ng-show="myQuestion.correctness === 'incorrect'">Oops! That is not correct.</p>
                <p> {{ myQuestion.feedback }} </p>
                <div class="btn" ng-click="selectContinue()">Continue</div>
            </div>
    </div>
    

    App.JS

        (function(){
        var codeApp = angular.module('codeApp', ['ngSanitize']);
    
        codeApp.controller('QuizController', ['$scope', '$http', "$sce", function($scope, $http, $sce){
            $scope.score = 0;
            $scope.activeQuestion = -1;
            $scope.activeQuestionAnswered = 0;
            $scope.percentage = 0;
    
            $http.get('quiz_data.json').then(function(quizData){
                $scope.myQuestions = quizData.data;
                $scope.totalQuestions = $scope.myQuestions.length;
            });
            $scope.checkAnswer = function(qIndex,aIndex){
                var questionState = $scope.myQuestions[qIndex].questionState;
    
                    if(questionState != 'answered') {
                        var userAnswer = document.getElementsByClassName("fillin")[0].value;
                        var correctAnswer = $scope.myQuestions[qIndex].questionAnswer;
    
                        $scope.myQuestions[qIndex].questionAnswer = correctAnswer;
    
                                if(userAnswer === correctAnswer){
                                    $scope.myQuestions[qIndex].correctness = 'correct';
                                    $scope.score += 1;
                                    console.log('Correct!' + $scope.score);
                                }
                                else{
                                    $scope.myQuestions[qIndex].correctness = 'incorrect';
                                    console.log('Wrong!');
                                    console.log(correctAnswer);
                                    console.log(userAnswer);
                                    console.log( document.getElementsByClassName("fillin")[0].value );
                                }
                            $scope.myQuestions[qIndex].questionState = 'answered';
    
                    }else{
                        console.log('Something is wrong');
                    }
    
            }
    
            $scope.selectContinue = function(){
                return $scope.activeQuestion += 1;
    
            }
    
            $scope.createShareLinks = function(percentage){
    
                var url = 'http://codifydesign.com';
                var emailLink = '<input type="text" placeholder="hi" /><a class="btn email" href="mailto:?subject=Try to beat my quiz score!&amp;body=I scored a '+percentage+'% on this quiz about Saturn. Try to beat my score at '+url+'">Email a friend</a>';
                var twitterLink = '<a class="btn twitter" target="_blank" href="http://twitter.com/share?text=I scored a '+percentage+'% on this quiz about Saturn. Try to beat my score at&amp;hashtags=SaturnQuiz&amp;url='+url+'">Tweet your score</a>';
                var newMarkup = emailLink + twitterLink;
                return $sce.trustAsHtml(newMarkup);
            }
        }]).filter('trustAsHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAsHtml(value);
            }
        }
        ]);
    })();
    

    达杰森

    [
        {
            "questionId": 0,
            "question" : "Saturn is <input id='guess-input' class='fillin' ng-blur='clearValues()' type='text' name='\"six\"'> many planets from the sun?",
            "questionAnswer" : "six"
        },
        {
            "questionId": 1,
            "question" : "Around Saturn are <input id='guess-input' class='fillin' ng-blur='clearValues()' type='text' name='\"rings\"'>",
            "questionAnswer" : "rings"
        }
    ]
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Lex    8 年前

    您已经对其进行了硬编码,以便始终查找具有 fillin . 更改此的两个实例…

    document.getElementsByClassName("fillin")[0].value
    

    …对这个…

    document.getElementsByClassName("fillin")[aIndex].value
    

    ……它应该开始为你工作。