Angular.js: ng-repeat内で適切に処理されていない文字列の配列

作成日 2012年08月15日  ·  22コメント  ·  ソース: angular/angular.js

配列から一連の値を表示する場合、次のように、データ項目がモデルに正しくバインドされていません。

$scope.model = {
  values: [
    "Value 1",
    "Value 2,
    ...
  ]
}

上記が一連の入力フィールドに表示されている場合、コンテンツへの変更はモデルに反映されません。 ただし、次のようなコードを使用して上記をバインドすると、モデルへのバインドが維持されます。

<div ng-repeat="value in model.values">
  <input type="text" ng-model="model.values[$index]" />
</div>

ただし、このアプローチの問題は、テキストフィールドが各キーアップにフォーカスを失うことです。 デモはこちらです:
http://jsfiddle.net/donovanh/GSx76/

最も参考になるコメント

私はこれを回避し、track byを使用してフォーカスが失われる問題を回避することができました(バージョン1.3に対してテスト済み)

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>              

全てのコメント22件

私はあなたがこれを持っていたと仮定しています:

 <div ng-repeat = "value in model.values">
 <input type = "text" ng-model = "value" />
 </ div>

スコープにバインドしているため、これは機能しません。 基本的には、持っている必要があります.ng-modelまたは折返しデータバインディングをプリミティブに仕事をしません。

したがって、リピーターの元の値ではなく、scope.valueプロパティにバインドしているため、これは基本的に予想されます。

データバインディングによって配列が変更されるため、回避策でもちらつきが予想されます。これにより、リピーターにはValue 1残り、新しいValue 2Xが表示されたように見えるため、リピーターは古いDOMを削除します。ノードを新しいDOMノードに置き換えるため、フォーカスが失われます。

これは直感に反することですが、それがシステムの設計方法です。 プリミティブにバインドしないでくださいが私の答えです。

フォローアップありがとうございます。 これを考慮してデータ構造を調整します。

私の例も機能しません: http

私はここで与えられた解決策に従いましたが、それは何の効果ももたらさず、問題はまだここにあります。

ここで与えられた解決策は、「 ng-model .が必要です」と述べています。 あなたはこれをしませんでした。 あなたはng-model="field"です。
文字列ではなく_objects_の配列を持つように、データを再構築する必要があります。
これが固定フィドルです: http

ああ、私のせい。 ありがとう。

この作品を機能リクエストとして提出したいと思います(これまでのところ、この問題への対応を考えると、そうなる可能性は低いと思いますが)。 このコメントはそうするのに十分ですか、それとも新しい問題を開く必要がありますか?

このバージョンのng-repeatディレクティブを試しましたか?
https://github.com/angular/angular.js/pull/1661
これにより、リピーターがプリミティブ値に関して抱えていた多くの問題が修正されます。
@NickHeiner :あなたが要求している特定の機能が正確に

ng-repeat内の文字列に直接バインドできる機能をリクエストしています。

あなたは今それをすることができます。 文字列が更新されたときにng-repeatの外側のスコープを更新したいということですか?

はい、文字列のリストのng-repeat内でng-modelを使用できるようにし、期待どおりに双方向のバインディングを機能させたいと考えています。

なぜ今は機能しないのかを理解し、機能させることは価値があるよりも厄介である可能性があることを認識していますが、Angularの操作が容易になるため、調べる価値があると思います。

Javascriptの動作方法を変更せずに動作させる唯一の方法
繰り返しループ内でsomeArray [$ index]を使用することです。 例えば

これにより、要素を直接参照できるため、変更は次のようになります。
配列に反映されます。

しかし、これは現在のng-repeat実装では正しく機能しません
入力を含むdivが破壊または移動され続けるため
変更のたびに。 私が以前に参照した修正はこれを可能にします。

2012年12月12日15:35で、ニック・ハイナー[email protected]書きました:

はい、ng-repeat内でng-modelを使用できるようにしたいと思います
文字列のリストであり、期待どおりに双方向のバインディングを機能させることができます。

なぜ今は機能しないのか理解し、機能させることに気づきました
価値があるよりも厄介かもしれませんが、調べる価値があると思います
Angularの操作が簡単になるからです。


このメールに直接返信するか、Gi tHubhttps://github.com/angular/angular.js/issues/1267#issuecomment-11293595で表示してください。

うん、それはうまくいく。 ありがとう!

これはAngular1.1.4で機能します-(文字列の配列を繰り返す)

http://jsfiddle.net/ez86K/

文字列配列のメンバーをUIコンポーネントに効果的にバインドする方法は次のとおりです。 textareaボックスを使用しましたが、入力などでも同じように実行できます。

http://jsfiddle.net/VvnWY/4/

こんにちは、ng-repeatの各行にテキストフィールドをバインドする必要があります。 テキストフィールドの値を行ごとに変えたい。 私のng-modelは、代わりに1つの値を私のng-repeatのすべてのテキストフィールドにバインドしています。 先に進むようにどのようにアドバイスしてください。

わかりました。最新バージョンのAngularを使用して動作させる方法を考え出しました。 配列のサイズが変わらない場合は、次のように1回限りのバインディングを使用できます。

<li ng-repeat="str in ::arrayOfStrings">
<input ng-model="arrayOfStrings[$index]" />
<br/>
</li>

これにより、リピートがdomを変更するのを防ぎ、プリミティブへの変更が正しく監視されます。

私はこれを回避し、track byを使用してフォーカスが失われる問題を回避することができました(バージョン1.3に対してテスト済み)

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>              

toboid:その回避策を共有してくれてありがとう! 配列データをオブジェクトの配列に再構築するのは非常に面倒な状況でした(再帰的なディレクティブビューでは)。 $ indexによる追跡が役立ちました。

「trackby」がこの問題を修正するのはなぜだろうか? 根本的な理由は何ですか?

@toboidが私の問題を解決してくれてありがとう、それは

オブジェクトを配列でラップしたくない場合

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>

上記のサンプルを使用してラジオボタンを使用して動的にフォームを作成しましたが、アクションの送信中にフォームデータ値を取得できませんでした。解決方法をガイドしてください。

上記のサンプルでは、​​ng-modelがng-repeatで機能していません。 フォーム送信中は、コンソールに未定義の値のみが表示されます。

@gissivaramanは新しいチケットを開き、問題を送信するための基本的なガイドラインに従ってください。 あなたの問題を別のものに付け加えないでください。

このページは役に立ちましたか?
0 / 5 - 0 評価