Mit AngularJs konnte ich nicht auf das Attribut eines anderen Div in der HTML-Seite zugreifen.

Question

Ich versuche, den Wert quest.quesId und questionOption.name an function checkScore zu übergeben. Aber es kommt als undefiniert (questionId, optionName). Wenn die selbe Zeile in ol gesetzt wird, kann ich die quest.quesId bekommen, aber das würde den Zweck nicht erfüllen.

HTML-Seite

<ol> 
    <li ng-repeat="quest in questionJson" value={{quest.quesId}}> 
     {{ quest.question }} 

     <div> 
      <label ng-repeat="questionOption in optionJson" ng-if="questionOption.quesId == quest.quesId"> 
      <input type= "radio" value = "{{ questionOption.name }}" name="radio{{questionOption.quesId}}"> 
       {{ questionOption.option }} 
      </label> 

     </div> 

     </div> 
    </li> 
</ol> 
<button type="submit" ng-click="checkScore(quest.quesId, questionOption.name)"> Check Score </button> 

JS Seite

var qnaModule = angular.module("qnaModule", []); 

qnaModule.controller("qaCtrl", function($scope) { 

    $scope.questionJson = [{ 
     "question": "What's your name?", 
     "quesId": 1 
    }, { 
     "question": "When was the universe form?", 
     "quesId": 2 
    }] 

    $scope.optionJson = [{ 
     "option": "A", 
     "quesId": 1 
    }, { 
     "option": "B", 
     "quesId": 1 
    }, { 
     "option": "C", 
     "quesId": 1 
    }, { 
     "option": "D", 
     "quesId": 1 
    }, { 
     "option": "ABC", 
     "quesId": 2 
    }, { 
     "option": "XYX", 
     "quesId": 2 
    }, { 
     "option": "XYZ", 
     "quesId": 2 
    }, { 
     "option": "PQRS", 
     "quesId": 2 
    }] 

    var answerJson = $scope.answerJson = [{ 
     "quesId": 1, 
     "answer": "A" 
    }, { 
     "quesId": 2, 
     "answer": "XYZ" 
    }] 

    $scope.checkScore = function(questionId, optionName) { 
     console.log(questionId); 
     console.log(optionName); 
    } 
}); 

Answer 1

Die quest.quesId, questionOption.name wird nur innerhalb der li Tag arbeiten. Versuchen Sie, eine Klick-Funktion in das Kontrollkästchen für den Eingabe-Typ zu geben und erfassen Sie den questId- und den option-Wert und gehen Sie dann zur Button-Funktion über.

Auch Ihr Eingabewert falsch ist, sollte es questionOption.option nicht questionOption.name sein. Bitte korrigieren Sie auch die Tastenklickfunktion.

Answer 2

Lassen Sie mich wissen, ob dieser Code hilft,

var qnaModule = angular.module("qnaModule", []); 

qnaModule.controller("qaCtrl", ['$scope',function($scope) { 

    $scope.questionJson = [{ 
     "question": "What's your name?", 
     "quesId": 1 
    }, { 
     "question": "When was the universe form?", 
     "quesId": 2 
    }]; 

    $scope.optionJson = [{ 
     "option": "A", 
     "quesId": 1 
    }, { 
     "option": "B", 
     "quesId": 1 
    }, { 
     "option": "C", 
     "quesId": 1 
    }, { 
     "option": "D", 
     "quesId": 1 
    }, { 
     "option": "ABC", 
     "quesId": 2 
    }, { 
     "option": "XYX", 
     "quesId": 2 
    }, { 
     "option": "XYZ", 
     "quesId": 2 
    }, { 
     "option": "PQRS", 
     "quesId": 2 
    }]; 

    $scope.answerJson = []; 

    $scope.checkScore = function(answerObject) { 
     for(var i = 0; i < $scope.questionJson.length; i++) { 

      console.log(answerObject[$scope.questionJson[i].quesId].answer); 
     } 

    };}]); 

und HTML wie folgt

<div ng-app="qnaModule" ng-controller="qaCtrl"> 
<ol > 
    <li ng-repeat="quest in questionJson"> 
     {{ quest.question }} 

     <div> 
      <label ng-repeat="questionOption in optionJson" ng-if="questionOption.quesId == quest.quesId"> 
       <input type= "radio" ng-model="answerJson[quest.quesId].answer" value="{{questionOption.option}}"> 
       {{ questionOption.option }} 
       <br/> 
      </label> 

     </div> 
    </li> 
</ol> 
<button ng-click="checkScore(answerJson)">Check Score</button> 
</div>