Question

我试图在li元素上循环但不知何故它没有显示li元素。

这是我正在循环的数据。

{    "30":{
      "data":[
         {
            "id":1,
            "report_name":"Jimit Advizer Report",
            "is_generated":0,
            "shopify_account_id":30,
            "total_sales":null,
            "created_at":"2016-01-15 06:11:48",
            "updated_at":"2016-01-15 06:11:48",
            "shop_title":"Jimit's Store"
         },
         {
            "id":2,
            "report_name":"Jimit Advizer Collection Report",
            "is_generated":0,
            "shopify_account_id":30,
            "total_sales":null,
            "created_at":"2016-01-15 06:13:32",
            "updated_at":"2016-01-15 06:13:32",
            "shop_title":"Jimit's Store"
         },
         {
            "id":3,
            "report_name":"Matt Advizer Report",
            "is_generated":0,
            "shopify_account_id":30,
            "total_sales":null,
            "created_at":"2016-01-15 12:08:22",
            "updated_at":"2016-01-15 12:08:22",
            "shop_title":"Jimit's Store"
         }
      ]    
    }
}

控制器

vm.reports = reports.data;

HTML

<ul class="list-group">
                    <li class="list-header-item clearfix" ng-repeat="(report_id, reports) in vm.reports track by $index">
                        <h4>Woof Product Shopify Store</h4>
                    </li>
                    <li class="list-group-item clearfix" ng-repeat="r in reports.data track by $index">
                        <div class="col-sm-12 col-md-5 p-0">
                            <h5>Necklace Revenue Advizer<br/><small>1/15/16 - currently generating</small></h5>
                        </div>
                        <div class="col-sm-12 col-md-3 m-t-5">
                            $17,357 <br/> <b>Total Sales</b>
                        </div>
                        <div class="col-sm-6 col-md-4 text-right m-t-5">
                            <button class="btn btn-success waves-effect m-r-5">View</button>
                            <button class="btn bgm-amber btn-default waves-effect m-r-5">Edit</button>
                            <button class="btn btn-danger btn-default waves-effect m-r-5" >Delete</button>
                        </div>
                    </li>
                </ul>

输出：

为什么我无法看到其他“li”？

Answer 1

ng-repeat实例在关闭节点内部退出。

之后就没有了。

此报告

<li class="list-header-item clearfix" ng-repeat="(report_id, reports) in vm.reports track by $index">
    <h4>Woof Product Shopify Store</h4>
</li>

对

没有影响

<li class="list-group-item clearfix" ng-repeat="r in reports.data track by $index">

因为第二个代码在它的边界之外

试试这个

<li class="list-group-item clearfix" ng-repeat="r in vm.reports['30']['data'] track by $index">

的 DEMO

嵌套的ng-repeat不起作用

1 个答案: