[解決済み] 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>

を削除してみました。 {{}} をインデックスから削除しましたが、これもうまくいきません。今のところ、inputのvalidationプロパティは正しく動作していますが、エラーメッセージは表示されません。

どなたか、ご意見をお聞かせください。

編集する 以下の素晴らしい回答に加え、この問題をより詳しく取り上げているブログ記事をご紹介します。 http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/

解決方法は？

AngularJSは、検証エラーを公開するために入力名に依存しています。

残念ながら、今日のところ、入力の名前を動的に生成することは (カスタムディレクティブを使用しない限り) 不可能です。実際 入力ドキュメント name属性は文字列しか受け付けないことがわかります。

動的な名前」の問題を解決するために を使用するには、インナーフォームを作成する必要があります ( ng-form ) :

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
      </ng-form>
  </div>

もう一つの方法は、このためのカスタムディレクティブを書くことです。

ngFormの使い方を示すjsFiddleはこちらです。 http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/