如果你在AngularJS中有可编辑的表格行，你在哪里放置表单元素？

Question

我们有一个表格（A），我们想要一个特定的行在点击时变得可编辑。目前我们有一个指令，它将一个新表插入到表（A）的td中，在该表中调用它。我们这样做，所以我们可以在表格周围使用<form>元素。

不可编辑-table.html

<table>
  <tbody>
      <tr>
        <td ng-show="editing" class="editing" colspan="2">
           <div edit-form-directive
             model="thing"
             on-success="thingUpdated(thing); editing=false;"
             on-cancel="editing=false; setUpdating(false);"
             enabled="editing" />
        </td>
      </tr>
    </tbody>
</table>

通过editFormDirective

插入的edit-template.html

 <form ng-submit="save(thingCopy)" name="EditForm">
      <table>
        <tbody>
           <tr>
              <td>
                <input ng-model="thing.field1"/>
              </td>
              <td>
                 <input ng-model="thing.field2"/>
              </td>
           </tr>
         </tbody>
      <table>
    </form>

问题：

我们已尝试将每行左右的<form>元素设置为可编辑，但这样做有效，但在表格中<form>周围的<tr>语义不正确。

我们还考虑将<form>放在uneditable-table.html的整个表格中。这会导致表单验证问题，每个非唯一表单节点可能会有很多错误，因此我们必须索引节点以获取特定错误。

我们确定了这里的代码，在<form>的整个新表格中放置了edit-template.html元素并将其插入到<td>中，因为这似乎是最无害的。

我们必须拥有表单标记，以便我们可以根据表单名称和节点访问验证。

有更多的Angular（或优雅）方式吗？

谢谢！

Answer 1

角度方式。不需要表格标签：

<table ng-form="EditForm">
    ...
</table>

http://docs.angularjs.org/api/ng.directive:ngForm