ng-repeat内のAngular Scope内のオブジェクトを変更する

Question

ng-repeatを使用してHTMLでフォームを作成し、スコープ内のオブジェクトからフォーム要素を生成します。私はまた、そのオブジェクトを使ってng-repeat以外の要素を生成します。

簡略化した例は、HTMLで次のようになります。

<div ng-app="App"> 
    <div ng-controller="Ctrl"> 
     <div class="block1"> 
      <form ng-repeat="(key, value) in test"> 
       <label>{{key}}</label> 
       <input ng-model="value" /> 
       <p>{{value}}</p> 
      </form> 
     </div> 
     <div class="block2"> 
     <p> 
      {{test.a}} 
     </p> 
     <p> 
      {{test.b}} 
     </p> 
     </div> 
    </div> 
</div> 

、これはJSで：この例では

angular.module('App', []); 

function Ctrl($scope) { 
    $scope.test = { 
     a:"abc", 
     b:"def" 
    } 
} 

、ブロック2内のテキストがtest.aとtest.bの初期値に設定されています。ループ内の入力値と<p>の値も初期値に設定されます。

入力内の値を変更すると、ng-repeatブロック内の<p>の値は正しく更新されますが、block2の<p>タグは更新に失敗します。

これはなぜ動作ですか？ ng-repeatは独自の分離スコープを作成しますか？もしそうなら、どうすればコントローラレベルのスコープを更新することができますか？また、誰かがこの行動の背後にある考え方やそれが提供する利点について説明することができますか？

JSFiddle Showing the problem

Answer 1

ng-repeatは、繰り返し項目ごとに子スコープを作成します。結果として、親への参照を作成しない子スコープにプリミティブを渡そうとしています。ただし、オブジェクトを渡すと、元のオブジェクト参照が渡されます。

は、必ずNG-モデルのドットを持つアンギュラ作成者によって与えられた

This is a great video regarding Angular Best Practices（2012年12月11日：角度の父の1の口から

）。オブジェクトの配列にこの正確な状況の詳細

修正データを説明しただけでなくするために分31に行く：

$scope.test = [{ val:"abc",key:'a'}, {val:"def",key:'b'} ] 

その後リピーターに：

<form ng-repeat="item in test"> 
    <label>{{item.key}}</label> 
    <input ng-model="item.val" /> 
    <p>{{item.val}}</p> 
</form> 

DEMO

Answer 2

これを試してみてください。

angular.module('App', []); 

function Ctrl($scope) { 
    $scope.test = [ 
     {label:"a", value:"abc"}, 
     {label:"b", value:"def"} 
    ] 
} 

と

<div ng-app="App"> 
    <div ng-controller="Ctrl"> 
     <div class="block1"> 
      <form ng-repeat="o in test"> 
       <label>{{o.label}}</label> 
       <input ng-model="o.value" /> 
       <p>{{o.value}}</p> 
      </form> 
     </div> 
     <div class="block2"> 
     <p> 
      {{test[0].value}} 
     </p> 
     <p> 
      {{test[1].value}} 
     </p> 
     </div> 
    </div> 
</div> 

Angularjsは、オブジェクトは参照渡しされているという事実を使用しています。したがって、オブジェクトを関数に渡して関数内のオブジェクトを変更すると、外側のオブジェクトも変更されます。 このアップデートをご覧くださいJSFiddle