Question

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

我的JSON Feed看起来像这样：

[
{
    "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>

Answer 2

如果您的json“metric”是一个数组，那么您也需要迭代每个“指标”。如果“metric”不是数组，则在json中定义它时将'['替换为'{'。

Answer 3

根据您的JSON结构，我认为您应该使用metric[1].meal[0].name来检索您的姓名。

Answer 4

您的JSON有效，但令人困惑。您的指标中包含文档数组，因此除非它们总是按顺序排列，否则您也必须重复这些数组。

此外，您的活动和膳食似乎是不必要的阵列。我会调查他们的沉着。

您需要使用HTML格式化转发器内的绑定：

<div ng-repeat="metric in eventmetrics">
 Event Name: {{metric[0].event[0].name}} <br/>
 Date: {{metric[0].event[0].date}} <br/>
 Time: {{metric[0].event[0].time}} <br/>
 Address {{metric[0].event[0].address}} <br/>
 Event Description: {{metric[0].event[0].description}} <br />
 <br />
 Meal Name: {{metric[1].meal[0].name}} <br />
 Meal Description: {{metric[1].meal[0].description}} <br />
</div>

或者您可以使用ng-model将其绑定到元素，以防您希望以后能够直接修改它

name: <input ng-model="metric[0].event[0].name"></input>

AngularJS - 使用ng-repeat打印JSON

4 个答案: