Question

我正在努力弄清楚如何在Angularjs重复中显示以下JSON文件。

对于以下JSON结果，我认为我可以使用以下内容在ng-repeat中显示标题：

<div ng-repeat="x in results">
    {{x.data[0].title}}
</div>

但我没有看到结果。

这是JSON：

{
"data": [
    {
        "id": 1,
        "title": "Temp Title",
        "description": "Temp Description",
        "created_at": {
            "date": "2016-03-15 07:10:17.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        },
        "updated_at": {
            "date": "2016-03-15 07:10:17.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        },
        "user": {
            "data": {
                "id": 29,
                "displayName": "chris.nakea",
                "email": "chris.nakea@freshconsulting.com",
                "join_date": 1458025279,
                "profile": {
                    "data": {
                        "id": 29,
                        "displayName": "chris.nakea",
                        "avatar": null,
                        "firstName": null,
                        "lastName": null,
                        "bio": null,
                        "city": null,
                        "zipcode": null,
                        "state": null,
                        "country": null,
                        "latitude": null,
                        "longitude": null,
                        "avatars": {
                            "data": [
                                {
                                    "id": "default_avatar.png",
                                    "filename": "default_avatar.png",
                                    "url": "https://cdn.band.dev/common/images/common/default_avatar.png",
                                    "created_at": {
                                        "date": "2016-03-15 00:00:00.000000",
                                        "timezone_type": 3,
                                        "timezone": "UTC"
                                    },
                                    "images": {
                                        "small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
                                        "medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
                                        "large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
                                    }
                                }
                            ]
                        },
                        "coverPhotos": {
                            "data": []
                        }
                    }
                }
            }
        },
        "category": {
            "data": {
                "id": 2,
                "name": "Staff / Events",
                "description": "Staff / Events",
                "colorCode": "#242156",
                "iconName": "icon-staff-events",
                "iconCharacterCode": "c108"
            }
        },
        "attachments": {
            "data": [
                {
                    "id": "1d3f96e2286c27ee599c9e49a0c33da0",
                    "filename": "man.jpg",
                    "url": "https://api.band.dev/v1/file/1d3f96e2286c27ee599c9e49a0c33da0",
                    "created_at": {
                        "date": "2016-03-15 07:10:17.000000",
                        "timezone_type": 3,
                        "timezone": "UTC"
                    },
                    "images": {
                        "small": "https://api.band.dev/v1/file/50af58b3d52d8629e9f5c4d0dcdd5181",
                        "medium": "https://api.band.dev/v1/file/51535d38f7b3cd82313eac2414059d83",
                        "large": "https://api.band.dev/v1/file/a7be1dada18e4041cf48aea377cafa29"
                    }
                }
            ]
        }
    },
    {
        "id": 2,
        "title": "Temp Title",
        "description": "Temp Description",
        "created_at": {
            "date": "2016-03-15 07:12:00.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        },
        "updated_at": {
            "date": "2016-03-15 07:12:00.000000",
            "timezone_type": 3,
            "timezone": "UTC"
        },
        "user": {
            "data": {
                "id": 29,
                "displayName": "chris.nakea",
                "email": "chris.nakea@freshconsulting.com",
                "join_date": 1458025279,
                "profile": {
                    "data": {
                        "id": 29,
                        "displayName": "chris.nakea",
                        "avatar": null,
                        "firstName": null,
                        "lastName": null,
                        "bio": null,
                        "city": null,
                        "zipcode": null,
                        "state": null,
                        "country": null,
                        "latitude": null,
                        "longitude": null,
                        "avatars": {
                            "data": [
                                {
                                    "id": "default_avatar.png",
                                    "filename": "default_avatar.png",
                                    "url": "https://cdn.band.dev/common/images/common/default_avatar.png",
                                    "created_at": {
                                        "date": "2016-03-15 00:00:00.000000",
                                        "timezone_type": 3,
                                        "timezone": "UTC"
                                    },
                                    "images": {
                                        "small": "https://cdn.band.dev/common/images/common/default_avatar_small.png",
                                        "medium": "https://cdn.band.dev/common/images/common/default_avatar_medium.png",
                                        "large": "https://cdn.band.dev/common/images/common/default_avatar_large.png"
                                    }
                                }
                            ]
                        },
                        "coverPhotos": {
                            "data": []
                        }
                    }
                }
            }
        },
        "category": {
            "data": {
                "id": 2,
                "name": "Staff / Events",
                "description": "Staff / Events",
                "colorCode": "#242156",
                "iconName": "icon-staff-events",
                "iconCharacterCode": "c108"
            }
        },
        "attachments": {
            "data": [
                {
                    "id": "a93cf8df7b60686e7ca6884d0ce353c8",
                    "filename": "man2.jpg",
                    "url": "https://api.band.dev/v1/file/a93cf8df7b60686e7ca6884d0ce353c8",
                    "created_at": {
                        "date": "2016-03-15 07:12:00.000000",
                        "timezone_type": 3,
                        "timezone": "UTC"
                    },
                    "images": {
                        "small": "https://api.band.dev/v1/file/cd04551395a355f4792fb85833156741",
                        "medium": "https://api.band.dev/v1/file/4ff543cd8f5055bfecd703dedaee6d87",
                        "large": "https://api.band.dev/v1/file/5cdd9a0c3650228e0b93f9c6cd1404df"
                    }
                }
            ]
        }
    }
]
}

Answer 1

<div ng-repeat="item in data">{{item.title}}</div>

在控制器中，将json绑定到范围。

$scope.data = jsonData.data;

这是你的小提琴 - jsFiddle

Answer 2

<div ng-repeat="x in results.data">
    {{x.title}}
</div>

https://jsfiddle.net/nvqf8oo7/6/

Answer 3

您可以删除datap [0]部分并获取输出

<div ng-repeat="x in results.data">
    {{x.title}}
</div>

输出：

临时标题

临时标题

如果你想过滤，那么你可以通过

来完成

<div ng-repeat="x in results.data | filter: { id: '1' }"> 
        {{x.title}}
</div>

输出：

临时标题

Answer 4

谢谢大家的回复。我终于弄清楚我没有看到任何东西的原因是因为我使用的是ui.bootstrap的模态，而且我的范围已经超出了范围。

我通过将ng-repeat移出模态来解决这个问题，但我本可以尝试使用模态范围本身。

AngularJS ng-repeat显示json

4 个答案: