如何使用ng-repeat显示json数据? [英] how to display json data using ng-repeat?

问题描述

我正在尝试使用ng-repeat来对Json数据进行处理.但是网页要么显示为白色页面，要么显示为空白页面.

I am trying to Json data using ng-repeat. But the web page is either showing as white page or a blank page.

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>

推荐答案

我知道您正在尝试做什么！ 您的模型说:

I see what you are trying to do! Your model says :

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

所以，问题应该是ng-repeat配合使用的数组！

so, questions should be an Array for ng-repeat to work with it!

仅凭猜测，我认为您根本不需要"q1"，"q2"标签. 修改您的问题"模型为此:

Just a guess, I don't think you will need "q1", "q2" tags at all.. Modify your "questions" model to this:

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

请记住:ng-repeat非常适合于Collections，而不是对象.

Remember: ng-repeat is well suited for Collections, and is not meant for Objects.

希望这能达到您的目的！

Hope this serves your purpose!

这篇关于如何使用ng-repeat显示json数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！