【问题标题】:Nested ng-repeat on angular is not working角度上的嵌套 ng-repeat 不起作用
【发布时间】:2017-01-05 01:15:13
【问题描述】:

我正在使用 ng-repeat 显示表单的各个部分,在每个部分中我必须显示问题,所以我使用一个嵌套的 ng-repeat 但我不知道如何显示(或者为什么不显示)的值。

这是我正在使用的示例 json:

{
    "section": [{
        "name": "Seccion 1",
        "questions": [{
            "statement": "Primera pregunta",
            "id": 1
        }, {
            "statement": "Pregunta 3",
            "id": 3
        }, {
            "statement": "Pregunta 4",
            "id": 4
        }],
        "id": 1
    }, {
        "name": "Seccion 2",
        "questions": [{
            "statement": "Segunda pregunta",
            "id": 2
        }],
        "id": 2
    }]
}

这是我的观点:

<div class="panel panel-default" ng-repeat="section in questionsTest track by $index">
    <div class="panel-heading">
        <h1>{{ section.name  }}</h1>
        <h3 class="panel-title">{{ section.name }}. {{ section.id }}</h3>
    </div>
    <div class="panel-body" ng-repeat="question in questions.section.questionsTest track by $index">
        {{ question[$index].statement }} <!-- .statement -->
    </div> 
</div>

Questionstest 是我将来自 Web 服务的 json 存储在控制器中的地方。在这种情况下,我使用与其他问题不同的 json 结构

【问题讨论】:

    标签: javascript angularjs json angularjs-ng-repeat ng-repeat


    【解决方案1】:

    试试这个。

    <div class="panel panel-default" ng-repeat="section in questionsTest">
        <div class="panel-heading">
            <h1>{{ section.name  }}</h1>
            <h3 class="panel-title">{{ section.name }}. {{ section.id }}</h3>
        </div>
        <div class="panel-body" ng-repeat="question in section.questions">
            {{ question.statement }} <!-- .statement -->
        </div> 
    </div>
    

    【讨论】:

    • 是的,您的代码是正确的,感谢帮助我解决我的问题
    【解决方案2】:

    第二个ng-repeat 似乎试图循环一个不存在的变量。鉴于您在该部分的循环中,您应该将第二次重复更改为:

    <div class="panel-body" ng-repeat="question in section.questions track by $index">
        {{ question.statement }} <!-- .statement -->
    </div> 
    

    【讨论】:

    • 是的,这是@digit 帮助我解决的问题。还是谢谢
    猜你喜欢
    • 1970-01-01
    • 2015-04-19
    • 1970-01-01
    • 2015-09-15
    • 1970-01-01
    • 2014-02-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多