使用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

您可以像这样在每一行中添加一个新表；

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

Answer 2

好吧，多亏了@pegatron 和他使用@tjbp 答案提供的Stack Overflow 链接，我最终使用了输入字段的表单属性，这对我有用。虽然它没有在所有浏览器上进行测试，但它可以实现 HTML5 验证。这就是我最终得到的结果。

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

这样，表单及其链接的输入将通过单击按钮发送。 谢谢。

Answer 3

你可以联合细胞：

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

或使用ngForm 指令而不是form（并在输入时手动添加提交）：

<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>