Question

通常，使用表单和输入字段，表单控制器将发布到表单名称属性下的相关范围中。并且，NgModelController在输入名称属性下发布。因此，对于具有ngModel指令的输入字段，可以检索输入字段的NgModelController，如$scope.myFormName.myInputFieldName

问题是如何为ngRepeat指令中的输入字段做同样的事情（获取NgModelController）？

我想使用$ index命名输入字段作为名称的一部分，因此每个模板实例都是唯一命名的。这呈现好，所以

<input name="foo_{{$index}}" ...

将$ index == 3的实例渲染为

<input name="foo_3" ...

但是尝试通过已发布的名称获取ngModelController不起作用（它是未定义的），例如：

$scope.myFormName.foo_3

显示此信息的一名侦探在这里：http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview

它显示成功获取'plain'输入元素的ngModelController并调用$ setValidity，并且还显示无法获取ngRepeat指令内输入元素的ngModelController。

从下面的plunker复制代码的相关部分：

<div ng-repeat="element in elements">
  <div ng-class="{error: form['foo_{{$index}}'].$invalid}">
    <input name="foo_{{$index}}" ng-model="element.a" type="number">
    <span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span>
  </div>
</div>
{{form.foo_0.$setValidity('bar', false)}}

Answer 1

@Flek是正确的，ng-repeat创建的新子范围是问题的根源。由于浏览器不允许嵌套＆lt; form＆gt;在嵌套表单时，或者想要在ngRepeat中进行表单验证时，必须使用ngForm元素。

请参阅google论坛主题中的Pawel's answer，其中显示了如何使用ng-form创建内部表单，和/或@ blesh的SO answer。

Answer 2

如果我正确理解您的问题，您正试图访问ng-repeat内创建的表单元素。

请看一下这个小提琴http://jsfiddle.net/EF5Jp/。在按钮单击处理程序内，您将可以访问标识为myForm.foo_2的元素。您可以注意到该元素是由myForm.foo_2而不是$scope.myForm.foo_2检索的。第二件事是，使用其范围更改值，而不使用其值angular.element(element).scope().foo = 6;。

如何在ngRepeat指令中获取输入字段的NgModelController？

2 个答案: