javascript - AngularJS - 使用 ng-repeat 打印 JSON

Question

angularjs 的新手，正在尝试弄清楚如何使用 ng-repeat 进行打印。

我的 JSON 提要如下所示:

[
{
    "metric": [
        {
            "event": [
                {
                    "id": 1,
                    "name": "Wedding",
                    "date": "2013-12-17",
                    "time": "2000-01-01T20:47:46Z",
                    "description": "Wedding Desc",
                    "address": "Wedding Address",
                }
            ]
        },
        {
            "meal": [
                {
                    "id": 1,
                    "name": "Chicken",
                    "description": "Chicken Yum!",
                }
            ]
        }
    ]
},
{
    "metric": [
        {
            "event": [
                {
                    "id": 2,
                    "name": "Rehersal",
                    "date": "2013-12-17",
                    "time": "2000-01-01T20:47:46Z",
                    "description": "Rehersal Desc",
                    "address": "Rehersal Address"
                }
            ]
        },
        {
            "meal": [
                {
                    "id": 2,
                    "name": "Steak",
                    "description": "9oz"
                }
            ]
        }
    ]
}
]

对于每个“指标”，我都想像这样打印出来

Event Name:
Date:
Time:
Address:
Event Description:

Meal Name:
Meal Description:

在我的模板上我有:

<div ng-repeat="metric in eventmetrics">
 {{ metric }}
</div>

这打印:

{"metric":[{"event":[{"id":1,"name":"Wedding","date":"2013-12-17","time":"2000-01-01T20:47:46Z","description":"Wedding Desc","address":"Wedding Address"}]},{"meal":[{"id":1,"name":"Chicken","description":"Chicken Yum!"}]}]} 

{"metric":[{"event":[{"id":2,"name":"Rehersal","date":"2013-12-17","time":"2000-01-01T20:47:46Z","description":"Rehersal Desc","address":"Rehersal Address"}]},{"meal":[{"id":2,"name":"Steak","description":"9oz"}]}]}

这显示了正确的信息 - 但是我不能去 metric.event.name 或 metric.meal.name 并且我没有打印任何东西。

我用 JSONLint 检查了我的 JSON，它似乎有效。

非常感谢任何帮助。

Answer 1

我将为您提供两种解决方案。一个使用数组索引，另一个使用所有嵌套的 ng-repeats:

根据您的 json，您可能希望多次重复执行类似这样的操作:

http://plnkr.co/edit/0ocF9clnDmbGAw4kwt8T?p=preview

<div ng-repeat="item in eventmetrics">
 <div ng-repeat="metric in item.metric">
   <div ng-repeat="event in metric.event">

     Event Name: {{event.name}} <br/>
     Date: {{event.date}} <br/>
     Time: {{event.time}} <br/>
     Address {{event.address}} <br/>
     Event Description: {{event.description}} <br />

   </div>

   <div ng-repeat="meal in metric.meal">

   Meal Name: {{meal.name}} <br />
   Meal Description: {{meal.description}} <br /> 
   </div>
  </div>
</div>

这将打印出以下内容:

Event Name: Wedding 
Date: 2013-12-17 
Time: 2000-01-01T20:47:46Z 
Address Wedding Address 
Event Description: Wedding Desc 
Meal Name: Chicken 
Meal Description: Chicken Yum! 
Event Name: Rehersal 
Date: 2013-12-17 
Time: 2000-01-01T20:47:46Z 
Address Rehersal Address 
Event Description: Rehersal Desc 
Meal Name: Steak 
Meal Description: 9oz 

如果您想使用产生相同文本输出的数组方法(虽然少了一个 div):

http://plnkr.co/edit/jUA22TJHfu0lZC1rgjNk?p=preview

<div ng-repeat="item in eventmetrics">

   <div ng-repeat="event in item.metric[0].event">

     Event Name: {{event.name}} <br/>
     Date: {{event.date}} <br/>
     Time: {{event.time}} <br/>
     Address {{event.address}} <br/>
     Event Description: {{event.description}} <br />

   </div>

   <div ng-repeat="meal in item.metric[1].meal">

   Meal Name: {{meal.name}} <br />
   Meal Description: {{meal.description}} <br /> 
   </div>
  </div>
</div>