带有嵌套表元素的angularjs ng-repeat表

Question

我有一个显示基本客户信息（姓名和电子邮件）的视图，其中有客户详细信息表。

我尝试在 tbody 部分编写 ng-repeat，但子表没有获取数据并且它只打印一次。

我也尝试使用ng-repeat-start ng-repeat-end，但我收到错误提示找不到匹配的ng-repeat-end

错误：[$compile:uterdir] 未终止的属性，找到 'ng-repeat-start' 但没有找到匹配的 'ng-repeat-end'。

我的代码：

<table class="customer">
    <thead>
    <tr>
      <th class="first">Customer Name <span class="sortable"></span></th>
      <th class="opp-detail">Email</th>
    </tr>
    </thead>
    <tbody ng-repeat="customer in customerList">
    <tr>
      <td>{{customer.Name}}</td>
      <td class="opp-detail">{{customer.EMail}}</td>

      <table class="customer-details collapsed" >
        <thead>
        <tr>
          <th class="opp-detail">Name</th>
          <th class="opp-detail">Address</th>
          <th class="opp-detail">City</th>
          <th class="opp-detail">Zip Code</th>
          <th class="opp-detail">Contact</th>
          <th class="opp-detail">Email</th>
          <th class="opp-detail">Phone</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="opp-detail">{{customer.Name}}</td>
          <td class="opp-detail">{{customer.Address}}</td>
          <td class="opp-detail">{{customer.City}}</td>
          <td class="opp-detail">{{customer.PostCode}}</td>
          <td class="opp-detail">{{customer.Contact}}</td>
          <td class="opp-detail">{{customer.EMail}}</td>
          <td class="opp-detail">{{customer.PhoneNo}}</td>
        </tr>
        </tbody>
      </table>
  </tr>
  </tbody>
</table>

任何想法应该如何解决？

---

测试数据：

[{ _id: 569fa2ab011d2ddc3065b802,
Name: 'Gicom',
SearchName: 'GICOM',
Address: 'some address',
Address2: '',
City: '',
Contact: '',
PhoneNo: '123456',
FaxNo: '',
PostCode: '',
Country: '',
EMail: 'mail@test.com',
MonitoringSource: 'US',
__v: 0 },
{ _id: 569fa2ab011d2ddc3065b803,
Name: 'Mitsui',
SearchName: 'MITSUI',
Address: '',
Address2: '',
City: '',
Contact: '',
PhoneNo: '',
FaxNo: '',
PostCode: '',
Country: '',
EMail: '',
MonitoringSource: 'US',
__v: 0 },
{ _id: 569fa2ab011d2ddc3065b804,
Name: 'Icon',
SearchName: 'ICON',
Address: 'customer address',
Address2: '',
City: 'some city',
Contact: '',
PhoneNo: '789456',
FaxNo: '',
PostCode: '',
Country: '',
EMail: 'mymail@test.com',
MonitoringSource: 'US',
__v: 0 }]

Answer 1

只需稍作调整即可正常工作。我为你清理了一点。在下面尝试我的解决方案，如果您有任何问题，请告诉我：

解决方案（针对嵌套表进行了修订）：

<table class="customer table table-bordered">
    <thead>
    <tr>
        <th class="first">Customer Name <span class="sortable"></span></th>
        <th class="opp-detail">Email</th>
    </tr>
    </thead>
    <tbody ng-repeat="customer in customerList">
    <tr>
        <td>{{customer.Name}}</td>
        <td class="opp-detail">{{customer.EMail}}</td>
    </tr>
    <tr class="collapsed">
        <td colspan="2">

            <table class="customer-details collapsed table table-bordered">
                <thead>
                <tr>
                    <th class="opp-detail">Name</th>
                    <th class="opp-detail">Address</th>
                    <th class="opp-detail">City</th>
                    <th class="opp-detail">Zip Code</th>
                    <th class="opp-detail">Contact</th>
                    <th class="opp-detail">Email</th>
                    <th class="opp-detail">Phone</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="opp-detail">{{customer.Name}}</td>
                    <td class="opp-detail">{{customer.Address}}</td>
                    <td class="opp-detail">{{customer.City}}</td>
                    <td class="opp-detail">{{customer.PostCode}}</td>
                    <td class="opp-detail">{{customer.Contact}}</td>
                    <td class="opp-detail">{{customer.EMail}}</td>
                    <td class="opp-detail">{{customer.PhoneNo}}</td>
                </tr>
                </tbody>
            </table>

        </td>
    </tr>
    </tbody>
</table>

注意 1：如果您使用的是 Bootstrap 并且想清楚地看到表格数据，只需将“表格”类与现有的“客户”类一起应用，您就会看到差异。

注意 2：您的代码的问题在于表的结构。您没有正确放置子表。我进行了调整，以便子表将出现在主父表的正下方，在它自己的单独行中，并且还将“折叠”类移动到 tr 标签而不是嵌套表。这将帮助您根据需要切换行。我用数据测试了这个修改后的解决方案，它在我身上运行良好。试试看，让我知道结果如何。