2

我需要根据从服务器获取的动态列表在页面上创建多个表单。为了做到这一点，我正在尝试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但我也找不到方法。

4

1 回答 1

0

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

于 2015-01-01T23:36:34.730 回答