3

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

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

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

<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)}}
4

2 回答 2

2

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

请参阅Pawel在 google group thread 上的回答，其中显示了如何使用 ng-form 创建内部表单，和/或@blesh 的SO 回答。

于 2013-03-02T02:05:07.883 回答
1

如果我正确理解了您的问题，那么您正在尝试访问在ng-repeat.

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

于 2013-03-02T01:22:44.493 回答