如何使用ng-repeat在JSON中迭代数组数组？

Question

我试图迭代一个JSON对象userTypes.
对于以下代码:

在第1 ng-repeat:
{{user.type}}输出'Parent'(如预期的那样),
{{user.options}}输出'[{"option1":"11QWERT","option2":"22QWERT"}]'(如预期的那样).

但在第二ng-repeat,我无法迭代user.options并输出每一个{{options}}

什么应该改变,以获得第二个option1和option2作为输出 ng-repeat？

JS片段

var userTypes = [{
    "type": 'Parent',
    "options": [{
        "option1": "11QWERT",
        "option2": "22QWERT"
    }]
}]

HTML片段

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <p>{{user.options}}</p>
    <li ng-repeat="option in user.options">
        <p>
            {{option}}
        </p>
    </li>
</li>

Answer 1

替换你的孩子<li>,<ul>然后你可以user.options像这样迭代:

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <ul ng-repeat="(key, value) in user.options[0]">
        <p>{{key}}: {{value}}</p>
    </ul>
</li>

或者,如果您options可能包含多个对象:

<li ng-repeat="user in userTypes">
    <p>{{user.type}}</p>
    <ul ng-repeat="option in user.options">
        <li ng-repeat="(key, value) in option">{{key}}: {{value}}</li>
    </ul>
</li>

如果您不需要对象键:

<ul ng-repeat="option in user.options">
    <li ng-repeat="item in option">{{item}}</li>
</ul>

小提琴

扩展说明:

在您的示例中,您有<li>另一个标记<li>:

<li ng-repeat="user in userTypes">
    <li ng-repeat="option in user.options">
    </li>
</li>

由于它不是有效的HTML浏览器,因此会将此标记解释为以下内容:

<li ng-repeat="user in userTypes">
</li>
<li ng-repeat="option in user.options">
</li>

由于ng-repeat为每次迭代创建了新的范围,因此无法user在第二次访问变量ng-repeat,迭代器也不会运行.