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（并在手动输入时添加提交）：

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

Answer 2

你可以像这样在每一行添加一个新表;

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

好吧，多亏了@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>

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

使用Angularjs

3 个答案: