动态表单名称和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>

演示版

旁注：为了更具体并分离出特定于表单的功能，您可以将其移至另一个控制器，并将ng-controller设置为ng-repeat级别，只需使用$scope代替this 。