使用Angularjs的每个表行的重复表单

Posted 2023-03-05

【中文标题】使用Angularjs的每个表行的重复表单

【英文标题】：Repeated forms per table row using Angularjs

【发布时间】：2016-03-05 09:24:36

【问题描述】：

所以...我确实在互联网上搜索了这个问题的解决方案，但没有找到任何直接（或间接）暗示答案的答案。

我正在尝试在一个表中创建多个表单，每一行都包含在<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>

我真的很想得到一些关于如何处理这个问题的帮助。

【问题讨论】：

我认为这是因为您不能在tr 中直接使用form 标签。为什么不将form 放在td 标签中？

您的解决方案在这里：***.com/questions/1249688/…

很有趣，我在问题中展示的第三个示例效果很好。谢谢@TjaartvanderWalt

【参考方案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>

【参考方案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>

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

【讨论】：

如果 HTML 无效，您确定这在所有浏览器中都能正常工作吗？不同的浏览器处理错误的方式不同！因此，无论何时发布新版本的浏览器，您都必须进行非常彻底的测试。 @Pegatron 的解决方案和链接的答案是无错误的 HTML。

@MrLister 看着这个link 它表明唯一不支持它的浏览器是IE。是的，我意识到这只是一个巨大的……叹息。

我不是在谈论 <button> 上的 form 属性。我说的是<tr> 中的<form> 元素。

哦，我现在明白了，说实话。它的全部本质将是针对目标形式。因此，即使所有呈现的表单都是在其他地方生成的，只要引用的 $scopes 保持有形，它真的“不应该”重要。我会看看你关心的浏览器支持。这是一个非常严重的问题。

【参考方案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>

【讨论】：

第二种方法是唯一完整的角度解决方案，应该是公认的答案。适用于所有浏览器，您还可以使用 myForm 来验证行。