logo标签列表

使用ng-repeat迭代嵌套的JSON数据

jsonangularjsangularjs-ng-repeat
3
如果我的JSON看起来像这样，我该如何使用ng-repeat？
[
    {
        "id": "1",
        "shop_name": "Shop Name",
        "user_id": "2",
        "shop_email": "",
        "shop_address": "",
        "shop_phone": "",
        "company_name": "",
        "description": "",
        "shop_provision": null,
        "created_at": "2014-11-05 10:32:32",
        "updated_at": "2014-11-06 21:02:00",
        "banners": [
            {
                "id": "18",
                "disk_name": "545be1dfa2011452107756.png",
                "file_name": "Screenshot from 2014-11-06 09:50:48.png",
                "file_size": "135441",
                "content_type": "image/png",
                "title": null,
                "description": null,
                "field": "banners",
                "sort_order": "18",
                "created_at": "2014-11-06 21:02:23",
                "updated_at": "2014-11-06 21:02:34",
                "path": "/uploads/public/545/be1/dfa/545be1dfa2011452107756.png",
                "extension": "png"
            },
            {
                "id": "20",
                "disk_name": "545be1e6b5048131391528.png",
                "file_name": "Screenshot from 2014-11-06 09:50:48.png",
                "file_size": "135441",
                "content_type": "image/png",
                "title": null,
                "description": null,
                "field": "banners",
                "sort_order": "20",
                "created_at": "2014-11-06 21:02:30",
                "updated_at": "2014-11-06 21:02:34",
                "path": "/uploads/public/545/be1/e6b/545be1e6b5048131391528.png",
                "extension": "png"
            }
        ]
    }
]

关于横幅广告，我想再次强调一下

在控制器上，我获得一个JSON对象或数组，其中包含一个子对象（responseJSON）

october.controllers['dashboard/wm'] = function ($scope, $request) {

     $scope.banners = $request('onGetBanners'); //the $request is an ajax function
     console.log($scope.banners);  
}

子对象

responseJSON像火狐浏览器控制台中的结果一样。

Object { result="[{"id":"1","shop_name":"...","extension":"png"}]}]"}

从这些内容中，我希望你能得到的结果是=
然后我尝试像这样迭代范围：
<div ng-repeat="banner in banners.responseJSON.result track by $index"></div>

更新

我改变了在控制器中初始化作用域的方式。

october.controllers['publishers/wm'] = function ($scope, $request) {

    $request('onGetBanners', {success: function(data){
        this.success(data).done(function() {
              $scope.response = data.result;
            });
    }})     

}

再试一次迭代

{% verbatim %}

{{response}} //outputs 
[
    {
        "id": "2",
        "shop_name": "Test Shop",
        "user_id": "1",
        "shop_email": null,
        "shop_address": null,
        "shop_phone": null,
        "company_name": null,
        "description": "",
        "shop_provision": null,
        "created_at": "2014-11-05 11:31:15",
        "updated_at": "2014-11-05 11:31:15",
        "banners": []
    }
]

<div ng-repeat="shop in response track by $index">
     {{ shop.shop_name }} //no data
</div>
{% endverbatim %}

如果我删除 track by $index，那么我会得到

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: shop in response, Duplicate key: string:", Duplicate value: "\""

我明白了，我永远不会忘记这种痛苦。

angular.fromJson(jsondata)
你有一个控制器设置 $scope.responseJSON = json; 吗？你能给我们展示一下这个控制器吗？ - Logan Murphy
是的，作用域看起来是这样的。 - fefe
抱歉，我必须更正自己，我将更新帖子。 - fefe
$request 是异步的吗？另外，banners 变量似乎存储了商店而不是横幅，变量命名对可读性很重要。 - Logan Murphy
是的，$request 是异步的。它是一个 AJAX 函数，用于远程检索数据。在迭代中，我将更改变量名。我曾尝试从控制器直接使用结果来初始化作用域，但不知何故无法工作。 - fefe
1个回答
3

你尝试过像这样的东西吗？

HTML

<div ng-repeat="shop in responseJson">
    {{shop.id}}
    <div ng-repeat="banner in shop.banners">
        <img ng-src="{{banner.path}}>
    </div>
</div>

请在jsFiddle上查看。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接