ng-repeat 中表单的 AngularJs 动态名称

Posted 2023-03-05

【中文标题】ng-repeat 中表单的 AngularJs 动态名称

【英文标题】：AngularJs dynamic name for a form inside ng-repeat

【发布时间】：2015-02-15 06:28:07

【问题描述】：

如何在 ng-repeat 中使用动态名称命名表单？

<div ng-repeat="item in itemList">
 <form name="item_details" ng-class="validateForm(item_details)">
   //few form elements
 </form>
</div>

我想动态命名每个表单。例如，将 $index 添加到表单的名称中。我如何实现它？我在 ng-repeat 上尝试了 ng-init，但没有成功。

【问题讨论】：

投反对票毫无意义 - 这是一个合理的问题

我同意投反对票没有意义。

是的，没有理由投反对票，这是一项非常困难的任务，但产生了非常有用的答案

【参考方案1】：

你可以这样做：

<form name="item_details$index" ng-class="validateForm('item_details'+$index)">

编辑：

您也可以使用ng-init，如下所示：

<div ng-repeat="item in itemList" ng-init="formName = 'item_details' + $index">
 <form name="formName" ng-class="validateForm(formName)">
   //few form elements
 </form>
</div>

如果只是根据表单的有效性应用一个类，那么你可以将样式应用到automatically added classes，例如：ng-valid：

.ng-valid 
   background-color: green;

【讨论】：

这不起作用。 <form name="item_details$index" ng-class="validateForm(item_details$index)"> validateForm 方法收到未定义的表单变量输入。

你错过了我的意思。如果您只需要设置 CSS 样式，则不需要 validateFrom

它是一个复杂的验证，而不是 css 更改。验证多个表单字段值以启用提交按钮。

在这种情况下，validateForm 方法不会接收到表单控制器实例。相反，它的输入变成了带有表单名称的“字符串”对象

你能定义validateForm(formName)这个函数吗

【参考方案2】：

您可以使用括号表示法通过动态名称访问表单的实例：

<div ng-repeat="item in itemList">
  <form name="item_details$index" ng-class="validateForm(this['item_details' + $index])">
    //few form elements
  </form>
</div>