4

我有一个页面，其中包含许多项目（通过 ng-repeat 呈现），这些项目中的每一个都包含一堆“只读”数据和一个表单。

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

但是，我的不同之处在于我没有将 ng-form 放在重复的元素上，因为在该表单中包含所有显示字段/div 并不“感觉正确”。

相反，我的 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中演示的那样，单击“在控制台中查看范围”按钮 - 显示表单尚未添加到范围中。

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

4

1 回答 1

3

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

我所做的，在环顾四周之后似乎是一种相当“标准”的做法，就是在每次调用时将表单传递给 View() 函数。

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)" />

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

于 2015-10-09T08:56:26.143 回答