ng-repeat-start的问题

时间:2014-05-13 09:36:15

标签: angularjs angularjs-ng-repeat

此代码有效:

<table ng-repeat="tool in tools | filter:tag">
                <tr>
                  <colgroup width="auto" span="5"></colgroup>
                  <th>Name</th><th>Icons</th><th>Price</th><th>Trial</th><th>Url</th>
                </tr>
                <tr>
                  <td><i class="fa fa-3x fa-caret-up" ng-click="voteUp()"></i><span>{{answer.vote}}</span><i class="fa fa-3x fa-caret-down" ng-click=voteDown()></i><h3>{{tool.title}}</h3></td><td><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box"><span class="icon icon-{{tagWithMeta.unique_tag}}"/></span></span></td><td></td><td></td><td></td>
                </tr>
                <colgroup width="100%" span="2"></colgroup>
                <tr>
                  <td colspan="5">
                    <table>
                      <tr>
                        <td>A</td><td>B</td>
                      </tr>
                      <tr>
                        <td class="fifty">{{tool.description}}</td><td class="fifty"><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box">{{tagWithMeta.tag}}</span></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

但问题是我的桌子看起来并不平等。

如果我在<tbody>中使用ng-repeat,或者如果我在第一个<tr> - 代码中使用ng-repeat-start并在最后</tr>代码中将其关闭,则所有内容都会中断仅显示嵌套的ng-repeat(带图标)正确。

根据这些帖子,它应该有效。 Angular.js ng-repeat across multiple tr's https://docs.angularjs.org/api/ng/directive/ngRepeat

Chrome Dev。告诉我,我正在加载ajax.googleapis.com/ajax/libs/angularjs/1.2.14。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您不应该关闭要重复的最后一个元素的结束标记上的ng-repeat,而应该在开始标记上。

因此,如果您只想重复几个表行,请从中删除ng-repeat,如下所示。

我更正了格式并且还移动了第二个colgroup,以便它是第二个表元素的子元素(因为它可能应该是这样)。

<table>
  <colgroup width="auto" span="5"></colgroup>
  <tr ng-repeat-start="tool in tools | filter:tag">
    <th>Name</th>
    <th>Icons</th>
    <th>Price</th>
    <th>Trial</th>
    <th>Url</th>
  </tr>
  <tr>
    <td><i class="fa fa-3x fa-caret-up" ng-click="voteUp()"></i><span>{{answer.vote}}</span><i class="fa fa-3x fa-caret-down" ng-click=voteDown()></i><h3>{{tool.title}}</h3></td>
    <td><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box"><span class="icon icon-{{tagWithMeta.unique_tag}}"/></span></span></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat-end>
    <td colspan="5">
      <table>
        <colgroup width="100%" span="2"></colgroup>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td class="fifty">{{tool.description}}</td>
          <td class="fifty"><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box">{{tagWithMeta.tag}}</span></td>
        </tr>
      </table>
    </td>
  </tr>
</table>