如何验证使用ng-repeat，ng-show（angular）动态创建的输入

Question

如何验证使用ng-repeat，ng-show（angular）动态创建的输入

我有一个使用ng-repeat创建的表。我想为表中的每个元素添加验证。问题是每个输入单元格与其上方和下方的单元格具有相同的名称。我试图使用该{{$index}}值来命名输入，但尽管HTML中的字符串文字显示正确，但它现在正在工作。

这是我现在的代码：

<tr ng-repeat="r in model.BSM ">
   <td>
      <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
   </td></tr>

我已经尝试删除{{}}from索引，但这也不起作用。截至目前，输入的验证属性工作正常，但不显示错误消息。

有人有什么建议吗？

编辑：除了下面的好答案，这里有一篇博客文章更详细地介绍了这个问题：http：//www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /

Answer 1

自从问到这个问题以来，Angular团队已经通过动态创建输入名称来解决了这个问题。使用Angular 1.3及更高版本，您现在可以执行以下操作：<form&nbsp;name="vm.myForm"&nbsp;novalidate> &nbsp;&nbsp;<div&nbsp;ng-repeat="p&nbsp;in&nbsp;vm.persons"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="person_{{$index}}"&nbsp;ng-model="p"&nbsp;required> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;ng-show="vm.myForm['person_'&nbsp;+&nbsp;$index].$invalid">Enter&nbsp;a&nbsp;name</span> &nbsp;&nbsp;</div></form>演示Angular 1.3还引入了ngMessages，这是一种更强大的表单验证工具。您可以使用与ngMessages相同的技术：<form&nbsp;name="vm.myFormNgMsg"&nbsp;novalidate> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;ng-repeat="p&nbsp;in&nbsp;vm.persons"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="person_{{$index}}"&nbsp;ng-model="p"&nbsp;required> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;ng-messages="vm.myFormNgMsg['person_'&nbsp;+&nbsp;$index].$error"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;ng-message="required">Enter&nbsp;a&nbsp;name</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</form>