找到你要的答案

Q:How to iterate through an array of arrays in JSON using ng-repeat?

Q:如何遍历数组使用JSON数组NG重复?

I am trying to iterate over a JSON object userTypes.
For the below code:

In the 1st ng-repeat:{{user.type}} outputs 'Parent'(as expected),{{user.options}} outputs '[{"option1":"11QWERT","option2":"22QWERT"}]'(as expected).

But in the 2nd ng-repeat, I am not able to iterate through the user.options and output each of the {{options}}

What should be changed to get the option1 and option2 as the outputs in 2nd ng-repeat ?

JS snippet

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

HTML snippet

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

I am trying to iterate over a JSON object userTypes.
For the below code:

在第一ng重复:{ { } }输出用户。型家长(如预期),{ } } {用户。选择输出”[ {“选项”:“11qwert”、“选择2”:“22qwert”} ]”(预期)。

但在第二ng的重复,我不能遍历user.options输出每个选项的{ { } }

什么应该改变,把选项和选项2为第二ng重复输出?

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>
answer1: 回答1:

Replace your child <li> with <ul> and then you can iterate user.options like so:

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

Or if your options may include more then one object:

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

If you don't need object keys:

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

Fiddle

Extended explanation:

In your example you have <li> tag inside another <li>:

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

Since it is not a valid HTML browser will interprets this markup to following:

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

Since ng-repeat creates new scope for each iteration you can't access user variable in second ng-repeat and iterator wouldn't run.

更换你的孩子<;李>;和<;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>

或者如果您的选项可能包含更多的一个对象:

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

小提琴

扩展的解释:

在你的例子你<;李& gt;标签里面的另一个<;李& gt;:

<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重复为每次迭代创建新的范围,所以不能在第二次重复中访问用户变量,迭代器不会运行。

answer2: 回答2:

For this exact JSON input it should be like this:

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

However as you said you want non fixed number of options, update your JSON to be like this:

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

And then your code should work as you wanted it.

You can add each new element to list with simple coma before it.

正是这个JSON输入应该是这样的:

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

但是当你说你要选择非固定数量,更新你的JSON是这样的:

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

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

您可以添加每个新的元素列表与简单的昏迷之前。

answer3: 回答3:

Since user.options is an array you should loop it again. By doing that you will get an object, with that object you can access your options1 and option2 easily.

please refer working plunker:

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

see through the code if you have any doubt.

Hope this helps

因为user.options是一个数组,你应该循环一遍。通过这样做,你会得到一个对象,该对象可以访问您的options1和选择2容易。

请工作plunker:

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

如果你有任何疑问,请看代码。

希望这有助于

answer4: 回答4:

A little aside, but just found out you can render a valid list HTML using ng-repeat-start/end in combination with ng-if="false" for the given array of arrays to flatten them:

<ul>
  <script ng-repeat-start="user in userTypes" ng-if="false"></script>
  <li ng-repeat="item in user.options">{{item}}</li>
  <script ng-repeat-end="" ng-if="false"></script>
</ul>

一点不谈,只是发现你能给予有效的列表的HTML使用NG重复开始/结束结合如果=“假”为给定的数组的数组扁平化:

<ul>
  <script ng-repeat-start="user in userTypes" ng-if="false"></script>
  <li ng-repeat="item in user.options">{{item}}</li>
  <script ng-repeat-end="" ng-if="false"></script>
</ul>
answer5: 回答5:

Just access the propertie of the option object in the second ng-repeat. Like option.option1

刚刚接触的对象在选择第二NG的重复性。像option.option1

answer6: 回答6:

You should probably make your user.options an object and not an array containing a single object.

Note the difference between these:

[{"option1":"11QWERT","option2":"22QWERT"}]
 {"option1":"11QWERT","option2":"22QWERT"}

You can then iterate the options with an ng-repeat like discussed here:

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

你应该让你的user.options对象而不是一个数组包含一个单独的对象。

注意这些区别:

[{"option1":"11QWERT","option2":"22QWERT"}]
 {"option1":"11QWERT","option2":"22QWERT"}

然后你可以迭代选项NG重复了:

<li ng-repeat="(key, value) in user.options">
    <p>{{ key }}: {{ value }}</p>
</li>
arrays  json  angularjs  angularjs-ng-repeat