动态表单名称和 ng-repeat

Question

我需要根据从服务器获取的动态列表在页面上创建多个表单。为了做到这一点，我正在尝试使用 angular 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 属性，但 angular 没有选择它。有没有办法创建具有动态名称的表单？或者是否有解决此问题的方法？

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

Answer 1

您可以从 $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>

Demo

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

动态表单名称和 ng-repeat

Dynamic form names and ng-repeat

javascript

angularjs

angularjs-ng-model

angularjs-validation