如何在AngularJs中使用ng-repeat来嵌套词典？

I have a dictionary where the value is itself an object. I want to show the entries in a table using ng-repeat.

我有一个字典,其中值本身就是一个对象。我想使用ng-repeat在表格中显示条目。

Here is the dictionary:

这是字典:

{
        'adam': {
            c1: "a",
            c2: "b"
        },
        'amalie': {
            c1: "c",
            c2: "d"
        }
    };

I have visited this question but it talks about simple key-value pairs.

我已经访问过这个问题,但它谈到了简单的键值对。

Here is a jsfiddle.

这是一个jsfiddle。

I want it to be shown as:

我希望它显示为:

NAME c1 c2
adam a b
amalie c d

4 个解决方案

#1

<ul>
    <li ng-repeat="(name, ages) in items">              
        {{name}} 
        <span ng-repeat="age in ages">
            {{age}}
        </span>        
    </li>
</ul>

jsfiddle

#2

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(name, age) in items">{{name}}: {{age.c1}} : {{age.c2}}</li>
    </ul>
</div>

use like this...

像这样使用......

#3

Check this updated jsFiddle. Hope this helps.

检查这个更新的jsFiddle。希望这可以帮助。

<div ng-app ng-controller="MyCtrl">
    <table>
        <tr>
            <td>Name</td>
            <td>C1</td>
            <td>C2</td>
        </tr>

        <tr ng-repeat="(name, age) in items">
            <td>{{name}}</td>
            <td>{{age.c1}}</td>
            <td>{{age.c2}}</td>
        </tr>

    </table>
</div>

http://jsfiddle.net/5dh0d8nd/2/

#4

It can be like this:

它可以是这样的:

<div ng-app ng-controller="MyCtrl">
    <table style="width:50%">
         <tr>
            <th>NAME</th>
            <th>C1</th>
            <th>C2</th>
         </tr>   
         <tr ng-repeat="(name,age) in items">
            <td>{{name}} </td>
            <td> {{age.c1}}</td>        
            <td> {{age.c2}}</td>
         </tr>
   </table>
</div>
<table style="width:100%">

</table>

See this Fiddle.

看到这个小提琴。

#1

<ul>
    <li ng-repeat="(name, ages) in items">              
        {{name}} 
        <span ng-repeat="age in ages">
            {{age}}
        </span>        
    </li>
</ul>