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

Question

我是 AngularJS 的初学者。

我的问题是如何使用 AngularJS 以表格格式显示具有展开/折叠功能的父级/子级数组记录(子行应在展开父行时显示)。

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

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

我的 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}];

Initially I wrote the following code, it is not working as per the expectations:

<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 .希望对您有所帮助。