ng-repeatでのバインド

Question

私はテキストを表示するdivを持っています。その下にはdivのテキストを編集できるテキストエリアがあります。テキストエリアのテキストをテキストに入力すると、divのテキストが変更されます。この問題は発生したくありません。問題はdivとtextエリアの両方が再作成されています。私は両方のために異なる範囲を使用していただろう。ここで

<div ng-repeat="item in list"> 
    <div> 
     {{item.text}} // this is the text that is changing when typing in text area 
    </div> 
    <div> 

     <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}} 
     </textarea> 

    </div> 
    </div> 

はあなただけで以下のようにヘッダーテキストを表示するためのJSONに要素を追加することが、あなたのJSファイルには、私の問題へのリンク http://codepen.io/ankitappuria27/pen/pyVzaj

Answer 1

あなたのdiv内のテキストを変更したくない、ちょうど使用1時間結合のような：

{{::item.text}} 

注：あなたtextareaの内側に加えた変更は、まだあなたのモデルtext値をofcourseの影響を与えます。変更はdivには表示されません。

例：は

http://codepen.io/anon/pen/VaxGOp

ドキュメント：あなたはそれが起こるしたくない場合は

https://docs.angularjs.org/guide/expression#one-time-binding

Answer 2

です：

app.controller('ctrl', function($scope) { 
    $scope.newitem = ''; 
    $scope.list = [ 
    { 
     "order":1, 
     "header":"Black", // header text 
     "text":"Black" 
    }, 
    { 
     "order":2, 
     "header":"Blue", // header text 
     "text":"Blue" 
    } 
    ]; 

}); 

との結合のためのHTML以下のようになります。

<div> 
     {{item.header}} 
    </div> 
    <div> 

     <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}} 
     </textarea> 

    </div>