Question

我需要根据从服务器获取的动态列表在页面上创建多个表单。为了做到这一点，我试图像这样使用角度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中使用它们，但我找不到办法。

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-controller级别设置ng-repeat，您只需使用{{ 1}}而不是$scope。

动态表单名称和ng-repeat

1 个答案: