[解決済み] AngularJSでng-repeatループ内にng-modelをバインドする。

質問

私はng-repeatループ内のスコープの問題に対処しようとしています - 私はかなりの数の質問を閲覧しましたが、私のコードが動作するようにすることはできませんでした。

コントローラのコード。

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

表示します。

<div ng-app>
     <div ng-controller="Ctrl">
       <div ng-repeat="line in lines">
           <div class="preview">{{text}}{{$index}}</div>

       </div>
       <div ng-repeat="line in lines">
           <-- typing here should auto update it's preview above -->
           <input value="{{line.text}}" ng-model="text{{$index}}"/>
            <!-- many other fields here that will also affect the preview -->
       </div>
     </div>
    </div>

ここにフィドルがあります。 http://jsfiddle.net/cyberwombat/zqTah/

基本的に、私はテキストの複数の行を含むオブジェクトを持っています (それはチラシ生成ツールです)。テキストの各行はユーザーによって微調整でき (テキスト、フォント、サイズ、色など)、そのためのプレビューを作成したいと思います。上記の例では、テキストを入力する入力フィールドのみを示しており、それが自動的/入力中にプレビュー div を更新するようにしたいのですが、もっと多くのコントロールがあるはずです。

私はまた、ループするインデックスのためのコードを正しく理解したかどうかわからない - それは、ループ内のng-model名を作成する最良の方法ですか？

どのように解決するのですか？

ng-repeatループの各反復に対して。 line は配列内のオブジェクトへの参照です。 したがって、値をプレビューするには {{line.text}} .

同様に、テキストにデータバインディングする場合は ng-model="line.text" . を使う必要はありません。 value を使う必要はありません（実際使うべきではありません）。

フィドル .

スコープとng-repeatについてのより詳細な情報については AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスは？ を、セクション ng-repeat .