如何使用带有 AngularJS 的 table 元素显示子级数组

Question

我是 AngularJS 的初学者。

我的问题是如何使用 expand/collapse 功能以 table 格式显示 Parent/Sub 级数组记录（子行应在展开父行时显示）AngularJS.

我已经完成了静态编码，它显示所有记录默认展开而不使用 AngularJS，如下图所示。

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

我的 Json 是：

var jsondata = [
{
    项目名称："product1"，
    orderNumber:123,
    订单详细信息：[
        {
            项目名称："Sub Item 1"，
            项目代码："code1"
        },{
            项目名称："Sub Item 2"，
            项目代码："code2"
        }
    ]
},{
    项目名称："product2"，
    orderNumber:1223,
    订单详细信息：[
        {
            项目名称:"Sub Item 3",
            项目代码："code3"
        },{
            项目名称:"Sub Item 4",
            项目代码："code4"
        },{
            项目名称："Sub Item 1"，
            项目代码："code1"
        },{
            项目名称:"Sub Item 6",
            项目代码："code6"
        }
    ]
},{
    项目名称："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 的 table 元素显示子级数组

How to show Sublevel Array Using table element with AngularJS

html

angularjs

angular-ui

angularjs-scope

angularjs-ng-repeat