3

通常、フォームと入力フィールドでは、フォーム コントローラーはフォーム名属性の下で関連するスコープに公開されます。そして、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

「プレーンな」入力要素の ngModelController の取得と $setValidity の呼び出しに成功したことを示しています。また、ngRepeat ディレクティブ内の入力要素の ngModelController の取得に失敗したことも示しています。

以下のプランカーからコードの関連セクションをコピーしました。

<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> 要素のネストが許可されていないため、フォームをネストする場合、または ngRepeat 内でフォームの検証を行う場合は、ngForm を使用する必要があります。

ng-form を使用して内部フォームを作成する方法を示す Google グループ スレッドの Pawel の回答、および/または @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。2 つ目は、スコープを使用して値を変更し、 のような値プロパティを使用しないことですangular.element(element).scope().foo = 6;。

于 2013-03-02T01:22:44.493 に答える