ng-repeat中的AngularJS ng-form

发布时间：2020-12-17 17:14:59 所属栏目：安全来源：网络整理

导读：我有一个页面,有许多项目(通过ng-repeat呈现),这些项目中的每一项都包含一堆“只读”数据和一个表单. 我正在使用ng-form指令并将其命名为this question/answer 然而,我的不同之处在于我没有在重复元素上添加ng-form,因为在该形式中拥有所有显示字段/ div并不

我有一个页面,有许多项目(通过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？

解决方法

所以,我已经解决了这个问题.

我所做的,在环顾四周似乎是一种相当“标准”的方式,就是在每次调用时将表单传递给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()方法 – 这将允许我访问当前正在执行的表单.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!