AngularJS ng-repeat 中的 ng-form

Question

我有一个页面，其中包含许多项目（通过 ng-repeat 呈现），每个项目都包含一堆 "read-only" 数据和一个表单。

我正在使用 ng-form 指令并将它们命名为 this question/answer

但是我的不同之处在于我没有将 ng-form 放在重复的元素上，因为它 "feel right" 不会在该表单中显示所有内容 fields/divs。

相反，我的 html 看起来像这样：

<div ng-controller="MyController">
 <div ng-repeat="inst in Repeats">
  {{inst.name}}
  <div>Loads of "read only" content here, including charts/custom directives</div>
  <ng-form name=frm_{{$index}}>
    <input type="text" ng-model="inst.name" />
  </ng-form>
 </div>
<input type="button" value="View scope in console" ng-click="View()" />

问题是我无法访问控制器范围内的表单。问题的答案（上面链接）表明这个命名约定有效，我应该在控制器的 $scope 上看到一些对象可以访问。

然而，如本 plunk 所示，单击 "View scope in console" 按钮 - 显示表单尚未添加到范围。

我是否需要更改 html 的结构以在同一元素上同时使用 ng-repeat 和 ng-form 才能正常工作？

Answer 1

所以，我已经解决了这个问题。

我所做的是在每次调用时将表单传递给 View() 函数，环顾四周似乎是一种相当 "standard" 的方法。

html 看起来像这样：

<div ng-controller="MyController">
 <div ng-repeat="inst in Repeats">
  {{inst.name}}
  <div>Loads of "read only" content here, including charts/custom directives</div>
  <ng-form name=frmInputs}>
    <input type="text" ng-model="inst.name" />
  </ng-form>
 </div>
<input type="button" value="View scope in console" ng-click="View(frmInputs)" />

请注意，就页面而言，表单不会获得 "Unique name"（我不再使用 {{$index}} 附加到表单名称） - 但是作为 ng-form在一个重复中 - 它对于该重复中的每个实例都是唯一的。所以我可以将 "frmInputs" 传递给控制器上的 View() 方法 - 这将允许我访问当前正在执行的表单。

AngularJS ng-repeat 中的 ng-form

AngularJS ng-form within ng-repeat

forms

angularjs

angularjs-ng-repeat

angularjs-ng-form