Question

我正在使用ng-repeat尝试使用Json数据。但网页显示为白页或空白页。

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

检查您的问题对象是否在范围内。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的json不包含数组，而是包含其他对象的对象。因此，你必须让angular知道迭代它的键：

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

Answer 3

我明白你要做什么！你的模特说：

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

所以，问题应该是一个用于ng-repeat的数组来处理它！

只是一个猜测，我认为你不需要＆＃34; q1＆＃34;，＆＃34; q2＆＃34;所有标签.. 修改你的问题＆＃34;模特到这个：

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

请记住：ng-repeat非常适合收藏，不适用于对象。

希望这符合您的目的！

如何使用ng-repeat显示json数据？

3 个答案: