动态表单名称和 ng 重复

Dynamic form names and ng-repeat

本文关键字：ng 重复 表单 动态      更新时间：2023-09-26

我需要根据从服务器获得的动态列表在页面上创建多个表单。为了做到这一点，我正在尝试使用这样的角度ng-repeat：

<tr ng-repeat="row in data.rows" ng-show="row.edit" class="edit_row" style="border: 0;">
    <td>
        <div class="col-lg-9">
            <form method="POST" class="form-horizontal" enctype="multipart/form-data" name="{{ row.row_id }}">
                ...
                <input ng-disabled="{{ row.row_id }}.$invalid" value="Save" name="submit" type="submit" ng-click="collection.save_edit(row.row_id);">
            </form>
        </div>
    </td>
</tr>

这没有按预期工作 - 表单正确生成了其name属性，但角度没有拾取这一点。有没有办法创建具有动态名称的表单？或者这个问题有解决方法吗？

我想到的唯一想法是以某种方式创建FormControllers以及 data.rows 并在ng-repeat中使用它们，但我也找不到一种方法。

您可以从

$scope 方法的this上下文访问表单对象，无论如何，该方法都将表示子范围。由于它是动态表单名称，因此您传入的表单名称和表单控件将始终附加到与表单名称相同的范围。因此，您可以通过在方法上访问它或在视图上显式使用 $scope[row.row_id].$invalid 来做枯萎。为了安全起见，我使用 ng-attr-name 来扩展插值并动态设置表单名称。

  /*Get form object on save*/
  $scope.save_edit = function(form){
    console.log(this[form]);
  }
  /*Returns whether the form is valid or not*/
  $scope.isInvalid = function(form){
    return this[form].$invalid; 
  }

您的表单将是：

<form novalidate method="POST" class="form-horizontal" enctype="multipart/form-data" 
      ng-attr-name="{{ row.row_id }}">
    <input type="text" name="test" ng-required="true" ng-model="row.test"/>
    <input ng-disabled="isInvalid(row.row_id)" value="Save" name="submit" 
           type="submit" ng-click="save_edit(row.row_id);">
 </form>

演示

旁注：为了更具体并分离出特定于表单的功能，您可以将这些功能移动到另一个控制器并在ng-repeat级别设置ng-controller，这样您就可以只使用$scope而不是this。

相关文章：