ng-repeatを使用してjsonデータを表示する方法は？

Question

私はng-repeatを使ってJsonデータにしようとしています。しかし、Webページは、白いページまたは空白のページとして表示されています。

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" 
       } 
      } 

     } 
    } 
} 

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

チェックがスコープ内にあります。

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

あなたのJSONは、配列が、他のオブジェクトとオブジェクトが含まれていません。したがって、角度を繰り返してキーを反復するようにしなければなりません。

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

Answer 3

私は何をしようとしていますか？あなたのモデルは言う ：そう

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

、質問はそれで動作するようにNGリピートのための配列でなければなりません！

だけの推測では、私はあなたが「Q1」すべてで、「Q2」のタグが必要になるとは思わない... これにあなたの「質問」モデルを変更します。

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

を忘れないでください：ngのリピートコレクションにはうってつけであり、オブジェクト用ではありません。

希望はこの目的に役立ちます。