AngularJS ng-repeat显示器json

Question

我想知道如何在我的Angularjs重复中显示下面的JSON文件。

以下JSON的结果，我想我可以简单地用下面的显示在NG-重复标题：

<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

你可以只取出从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 2

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

而在你的控制器，绑定JSON的范围。

$scope.data = jsonData.data; 

这里是为您小提琴 - jsFiddle

Answer 3

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

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

Answer 4

谢谢大家的回应。我终于明白，我没有看到任何东西的原因是因为我使用ui.bootstrap的模式，我超出了范围。

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