Параметр функции не определен для массива объектов в AngularJS

Я практиковал AngularJS1x, делая уроки от Линды и Удеми. Я сделал учебник, который создал викторину с несколькими вариантами ответов. Я хотел посмотреть, понял ли я код, воссоздав его, а затем продвинув его дальше, но пытаясь заполнить пустую викторину.

Все вопросы и ответы взяты из файла JSON. Проверка заполнения работает правильно, и если ввод пользователя соответствует строке в объекте JSON, он работает нормально. Я особо не менял, но код не работает при попытке вызвать массив $ parent.index. Для справки по исходному коду, который я использовал в тесте с несколькими вариантами ответов, вы можете найти ссылку здесь

Я был бы рад, если бы кто-нибудь также мог объяснить, почему я ошибался, если я настроил его неправильно, чтобы мне стало лучше. Я сравнил его с исходным кодом и не смог найти, где я ошибся.

Проблема заключается в нацеливании на номер массива объекта. Я также покажу код ниже.

Проблема Он находится внутри всего, что вызывает параметр qIndex следующим образом:

$scope.myQuestions[qIndex].questionState; //Says it is undefined

если я даю ему жестко закодированный номер массива, например 0, он работает

$scope.myQuestions[0].questionState //If all of them are like this its fine as it calls the first question and finds the correct answer if typed into the input.

Вот код ниже:

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($parent.$index, $index)}"
                ng-click = "checkAnswer($parent.$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 class = "results {{ (totalQuestions === activeQuestion) ? 'active' : 'inactive' }}">
            <div>
                <h3>Results</h3>

                <p>You Scored {{percentage}}% by correctly answering {{score}} of the total {{totalQuestions}} questions.</p>
                <p>Use the links below to challenge your friends.</p>

                <div class = "share" ng-bind-html = "createShareLinks(percentage)"></div>

            </div>
        </div>
    </div>

QUIZ.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 = $(".fillin").val();
                    console.info(aIndex); //logs 0
                    console.info(qIndex); //logs undefined

                    var correctAnswer = $scope.myQuestions[qIndex].questionAnswer;

                    $scope.myQuestions[qIndex].questionAnswer = correctAnswer;

                            if (userAnswer === correctAnswer){
                                $scope.myQuestions[qIndex].correctness = 'correct';
                                $scope.score += 1;
                                console.info('Correct!' + $scope.score);
                            }
                            else{
                                $scope.myQuestions[qIndex].correctness = 'incorrect';
                                console.info('Wrong!');
                            }
                        $scope.myQuestions[qIndex].questionState = 'answered';

                }else{
                    console.info('Something is wrong');
                }

                $scope.isCorrect = function(qIndex,aIndex){
                    return $scope.myQuestions[qIndex].questionAnswer === userAnswer;
                }
        }

        $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);
        }
    }
    ]);
})();

JSON

[
    {
        "questionId": 0,
        "question" : "Saturn is <input id='guess-input' class='fillin' type='text' name='\"six\"'> many planets from the sun?",
        "questionAnswer" : "six"
    },
    {
        "questionId": 1,
        "question" : "Around Saturn are <input id='guess-input' class='fillin' type='text' name='\"rings\"'>",
        "questionAnswer" : "rings"
    }
]
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В angularjs $parent.$index - это $index из родительской области. Это полезно, когда у вас есть вложенные циклы. Затем вы можете получить $index из родительской области, используя конструкцию $parent.$index. В вашем коде нет вложенных циклов. ng-repeat = "myQuestion in myQuestions" - это петля верхнего уровня. Таким образом, у него нет индекса в родительской области. Я могу предположить, что в исходном коде был один цикл в другом, как один ng-repeat в другом ng-repeat.

Другие вопросы по теме