wie JSON-Daten mit ng-repeat anzuzeigen?

Question

Ich versuche, Json Daten mit ng-repeat. Die Webseite wird jedoch entweder als weiße Seite oder als leere Seite angezeigt.

Die Json:

{ 
    "questions": { 
      "q1": { 
       "qText": " question1", 
       "result":"result1", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q2": { 
       "qText": " question2", 
       "result":"result2", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q3": { 
       "qText": " question3", 
       "result":"result3", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q4": { 
       "qText": " question4", 
       "result":"result4", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q5": { 
       "qText": " question5", 
       "result":"result5", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q6": { 
       "qText": " question6", 
       "result":"result6", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      } 

     } 
    } 
} 

Die HTML:

<div ng-repeat="question in questions track by $index"> 
    <div class="q1"> 
     <p>{{question.qText}}</p> 
     <input type="radio" ng-model="qobj.q1" ng-value="'A'" ><label>{{question.options.A}}</label> 
     <input type="radio" ng-model="qobj.q1" ng-value="'N'" ><label>{{question.options.N}}</label> 
     <input type="radio" ng-model="qobj.q1" ng-value="'D'" ><label>{{question.options.D}}</label> 
     <input type="radio" ng-model="qobj.q1" ng-value="'NA'" ><label>{{question.options.NA}}</label> 
    </div> 
</div> 

Answer 1

Überprüfen Sie, ob Ihre Fragen Objekt im Gültigkeitsbereich befindet.

angular.module("test", []) 
 
    .controller('ctr1', function($scope) { 
 
    $scope.save = function(ques){ 
 
     $scope.showAnswer=true; 
 
    } 
 
    $scope.ques = { 
 
     "q1": { 
 
     "qText": " question1", 
 
     "result": "", 
 
     "options": { 
 
      "A": "option1", 
 
      "N": "option2", 
 
      "D": "otpion3", 
 
      "NA": "option4" 
 
     } 
 
     }, 
 
     "q2": { 
 
     "qText": " question2", 
 
     "result": "", 
 
     "options": { 
 
      "A": "option1", 
 
      "N": "option2", 
 
      "D": "otpion3", 
 
      "NA": "option4" 
 
     } 
 
     }, 
 
     "q3": { 
 
     "qText": " question3", 
 
     "result": "", 
 
     "options": { 
 
      "A": "option1", 
 
      "N": "option2", 
 
      "D": "otpion3", 
 
      "NA": "option4" 
 
     } 
 
     } 
 
    } 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="ctr1"> 
 
    <form name="testForm"> 
 
    <ul> 
 
     <li ng-repeat="q in ques"> 
 
     {{q.qText}} 
 
     <input type="radio" ng-model="q.result" ng-value="q.options.A" /><label>{{q.options.A}}</label> 
 
     <input type="radio" ng-model="q.result" ng-value="q.options.N" /><label>{{q.options.N}}</label> 
 
     <input type="radio" ng-model="q.result" ng-value="q.options.D" /><label>{{q.options.D}}</label> 
 
     </li> 
 
    </ul> 
 
    <input type="submit" ng-click="save(ques)" value="Submit" /> 
 
    </form> 
 
    <div ng-if="showAnswer"> 
 
    <ul> 
 
     <li ng-repeat="q in ques"> 
 
     {{q.qText}}== {{q.result}} 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 2

Ihre json enthält kein Array, sondern ein Objekt mit anderen Objekten. Daher müssen Sie eckig wissen lassen, wie Sie die Schlüssel durchlaufen:

<div ng-repeat="(key, question) in questions track by $index"> 
    <!-- .. --> 
</div> 

Answer 3

Ich sehe was Sie versuchen zu tun! Ihr Modell sagt:

`"questions": { 
      "q1": {...} 
      }, 
      "q2": {...}, 
      ... 
}` 

so, Fragen sollte ein Array für ng-repeat sein, mit ihm zu arbeiten!

Nur eine Vermutung, ich glaube nicht, Sie müssen "q1", "q2" Tags überhaupt .. Ändern Sie bitte Ihre "Fragen" Modell dazu:

`"questions": [ 
      { 
       "qText": " question1", 
       "result":"result1", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      {...}, 
      {...}, 
      {...} 
]` 

Denken Sie daran: ng-repeat eignet sich gut für Sammlungen und ist nicht für Objekte gedacht.

Hoffe, das dient Ihrem Zweck!