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"。valueng-model を使用する場合は使用する必要はありません（実際には使用しないでください）。

フィドル。

スコープとng-repeatの詳細については、AngularJSでのスコープのプロトタイプ/プロトタイプの継承のニュアンスは何ですか？を参照してください。、セクションng-repeat。

<h4>Order List</h4>
<ul>
    <li ng-repeat="val in filter_option.order">
        <span>
            <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
            &nbsp;{{filter_option.order_name[$index]}}
        </span>
        <select title="" ng-model="filter_param[val]">
            <option value="asc">Asc</option>
            <option value="desc">Desc</option>
        </select>
    </li>
</ul>