嵌套的ng-repeat不起作用

时间:2013-12-28 22:31:47

标签: angularjs ngtable

我正在使用ng-table以下列方式将数组结构放入表中:

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <div ng-repeat="(key, val) in entry">
        <td data-title="key">
          {{val}}
        </td>
      </div>
    </tr>
  </tbody>
</table>

考虑场地:

[{"id":"C001","name":"Bobo"},{"id":"C002","name":"Shobo"},{"id":"C003","name":"Soho"}]

第一个ng-repeat可以正常工作,因为我可以看到表格中的3行。第二个ng-repeat似乎不起作用。

我做错了什么?

2 个答案:

答案 0 :(得分:5)

Table Row Element<tr>)无法接受<div>作为孩子。您必须直接在表格单元格ngRepeat)上使用第二个<td>

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <td ng-repeat="(key, val) in entry" data-title="key">
        {{val}}
      </td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:2)

<div>元素不能是<tr>的直接子元素。您只需将内部ngRepeat放在td元素上:

<table ng-table="tableParams" class="table" ng-controller="VenueListCtrl">
  <tbody>
    <tr ng-repeat="entry in venues">
      <td ng-repeat="(key, val) in entry" data-title="key">
        {{val}}
      </td>
    </tr>
  </tbody>
</table>