Question

我是AngularJS的初学者。

我的问题是如何使用展开/折叠功能（使用AngularJS扩展父行时应显示子行）以表格格式显示父/子级别数组记录。

我已完成静态编码，默认显示所有记录，而不使用AngularJS，如下图所示。 Static Records (with HTML only)

我想在页面加载时默认只显示父记录，然后如果使用展开任何父记录（行），那么只应展开子行。

我的Json是：

var jsondata = [
{
    itemName:"product1",
    orderNumber:123,
    orderDetails:[
        {
            itemName:"Sub Item 1",
            itemCode:"code1"
        },{
            itemName:"Sub Item 2",
            itemCode:"code2"
        }
    ]
},{
    itemName:"product2",
    orderNumber:1223,
    orderDetails:[
        {
            itemName:"Sub Item 3",
            itemCode:"code3"
        },{
            itemName:"Sub Item 4",
            itemCode:"code4"
        },{
            itemName:"Sub Item 1",
            itemCode:"code1"
        },{
            itemName:"Sub Item 6",
            itemCode:"code6"
        }
    ]
},{
    itemName:"product3",
    orderNumber:1123
}
];

最初我编写了以下代码，但它没有按照预期工作：

<table class="table">
  <thead>
    <tr class="table-blue-header">
      <th style="width:20px;"></th>
      <th><a href="javascript:;">Item Name</a></th>
      <th><a href="javascript:;">Order Number</a></th>
    </tr>
  </thead>
  <tr ng-repeat="LocalData in SearchOrdersData">
    <th style="width:20px;"><a ng-click="LocalData.visible = !LocalData.visible" href="javascript:;">&raquo;</a></th>
    <td>{{LocalData.itemName}}</td>
    <td>{{LocalData.orderNumber}}</td>
  </tr>
  <tr ng-if="LocalData.visible" ng-repeat="orderdetailsdata in data = (LocalData.orderDetails)">
    <td colspan=3><table class="table table-bordered">
        <thead>
          <tr class="table-blue-header">
            <td>Item Name</td>
            <td>Item Code</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-show="data.length">
            <td>{{orderdetailsdata.itemName}}</td>
            <td>{{orderdetailsdata.itemCode}}</td>
          </tr>
          <tr ng-hide="data.length">
            <td colspan="10">No Child records to display.</td>
          </tr>
        </tbody>
      </table></td>
  </tr>
</table>

任何人都可以帮我吗？

Answer 1

您试图在下一个tr中访问tr（LocalData）的范围，这是不可用的！要访问相同的范围，您需要将TR包装在tbody中。像这样<tbody ng-repeat="LocalData in SearchOrdersData"> ... </tbody>

我创建了fiddle。希望它会有所帮助。

如何使用带有AngularJS的表元素显示Sublevel数组

1 个答案: