Question

我有一个页面，有许多项目（通过ng-repeat渲染），这些项目中的每一项都包含一堆＆＃34;只读＆＃34;数据和表格。

我使用ng-form指令并将其命名为this question/answer

然而，我的不同之处在于我没有在重复的元素上加上ng-form，因为它没有感觉到正确的＆＃34;将所有显示字段/ 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中所示，单击＆＃34;在控制台中查看范围＆＃34;按钮 - 显示表单尚未添加到范围中。

我是否需要更改html的结构，以便在同一元素上同时使用ng-repeat和ng-form？

Answer 1

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

我做了什么，在环顾四周似乎是一种相当“标准”的方式之后，就是在每次调用时将表单传递给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表单位于重复 - 它对于该重复中的每个实例都是唯一的。所以我可以将“frmInputs”传递给我的控制器上的View（）方法 - 这将允许我访问当前正在执行的表单。

ng-repeat中的AngularJS ng-form

1 个答案: