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

时间:2016-01-20 14:58:19

标签: javascript angularjs

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

我试图在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 }]

1 个答案:

答案 0 :(得分:0)

只需很少的调整就可以正常工作。我为你清理了一下。试试下面的解决方案&amp;如果您有任何问题,请与我联系:

解决方案(针对嵌套表修改):

public List<Person> getEmployeeByID(string empName)
{
    LinqToSqlDataContext database = new LinqToSqlDataContext();
    return database.Persons.Where(emp => emp.personName.Contains(empName)).ToList();
    //return the ID of the person which carries the textbox's name
}

注1:如果您使用的是Bootstrap&amp;想要清楚地看到表格数据,只需应用&#34; table&#34;课程以及现有的&#34;客户&#34;上课,你会发现差异。

注意2:代码的问题是表的结构。您没有正确放置子表。我进行了调整,以便子表格显示在主要父级的下方,在它自己的一个单独的行中。也感动了#34;倒塌&#34;将类转到tr标签而不是嵌套表。这将帮助您根据需要切换行。我用数据和测试方法测试了这个修订过的解决方案它在我的结尾工作正常。尝试一下&amp;让我知道它是怎么回事。