html - 使用 Angularjs 每表行重复表单

Question

所以...我确实在互联网上搜索过这个问题的解决方案，但没有找到任何直接(或间接)提出答案的答案。

我试图在一个表中创建多个表单，每行都包含在 <form> 中像这样的标签

<tr ng-repeat="item in items">
     <form ng-submit="updateItem(item)">
           <td ng-bind="$index + 1"></td>
           <td ng-bind="item.title"></td>
           <td><button>Submit</button></td>
     </form>
</tr>

它似乎按预期工作，直到我意识到 ng-repeat 没有包装 <form>在 <td> 周围标记标签，它最终看起来像这样

<tr ng-repeat="item in items">
     ***<form ng-submit="updateItem(item)"></form>*** //The form tags were unwrapped
           <td ng-bind="$index + 1"></td>
           <td ng-bind="item.title"></td>
           <td>
              ***<button>Submit</button>*** //Buttons don't submit cos no form
           </td>
</tr>

虽然我真正想要实现的是类似

<tr>
    <form>
    <td>
        <button>Hi</button>
    </td>
    </form>
</tr>
<tr>
    <form>
    <td>
        <button>Hello</button>
    </td>
    </form>
</tr>

我真的很想得到一些帮助来解决这个问题。

Answer 1

你可以联合细胞:

<tr ng-repeat="item in items">
   <td colspan="3">
       <form ng-submit="updateItem(item)">
           ...
       </form>
   </td>
</tr>

或者使用 ngForm 指令而不是 form(并手动添加 submit on enter):

<tr ng-repeat="item in items" ng-form="myForm">
     <td ng-bind="$index + 1"></td>
     <td ng-bind="item.title"></td>
     <td><button type="button" ng-click="updateItem(item)">Submit</button></td>
</tr>