如何使用ng-repeat循环访问JSON中的数组数组？

Question

我正在尝试迭代一个JSON对象userTypes。
对于下面的代码：

在第一个ng-repeat中:< br > < code > { { user . type } } outputs ' Parent '(如预期一样)，< br > < code > { { user . options } } outputs '[{ " option 1 ":" 11 qwert "，" option2":"22QWERT"}]'(如预期一样)。< br >

但是在第二个ng-repeat中，我无法循环访问user.options并输出每个{{options}}

应该更改什么才能将option1和option2作为第2个ng-重复中的输出？

JS 代码段

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

超文本标记语言片段

<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

因为是用户。选项是一个数组，您应该再次循环它。通过这样做，您将获得一个对象，通过该对象，您可以轻松访问选项1和选项2。

请参考工作柱塞：

http://embed.plnkr.co/5c3i5fY50jLP0fFgxkUX/preview

如果您有任何疑问，请查看代码。

希望这有帮助

Answer 2

对于这个精确的JSON输入，应该是这样的：

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

但是，正如您所说，您想要非固定数量的选项，请将您的JSON更新为这样：

"options":["11QWERT","22QWERT"]

然后你的代码应该按照你的要求工作。

您可以将每个新元素添加到列表中，并在前面加上简单的coma。

Answer 3

替换您的孩子＜code＞

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

或者，如果＜code＞选项

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

小提琴

扩展解释：

在您的示例中，您有< code >

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

由于它不是有效的超文本标记语言，浏览器将此标记解释为以下内容：

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

由于< code>ng-repeat为每次迭代创建了新的作用域，因此您无法在第二个< code>ng-repeat中访问< code>user变量，迭代器也不会运行。