如何为 ng Repeat 指令中的输入字段获取 NgModel 控制器？

Question

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

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

我想使用 $index 作为名称的一部分来命名输入字段，以便每个模板实例都是唯一命名的。这样就可以了，所以

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

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

<input name="foo_3" ...

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

$scope.myFormName.foo_3

显示此内容的 plunker 在这里：http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview

它显示成功获取“普通”输入元素的 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 创建的新子作用域是这里问题的根源。由于浏览器不允许嵌套

元素，嵌套表单时必须使用 ngForm，或者当您想在 ngRepeat 中进行表单验证时。

请参阅 google 组线程上的 Pawel's answer，它展示了如何使用 ng-form 创建内部表单，和/或 @blesh 的 SO answer。

Answer 2

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

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