Ändern von Objekten innerhalb von Angular Scope in ng-repeat

Question

Ich erstelle ein Formular in HTML mit Hilfe von ng-repeat, um die Formularelemente von einem Objekt im Bereich zu erzeugen. Ich verwende dieses Objekt auch, um andere Elemente außerhalb der ng-Wiederholung zu generieren.

Ein vereinfachtes Beispiel sieht wie folgt in 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> 

und dies in JS:

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

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

In diesem Beispiel wird der Text in block2 auf die Anfangswerte von test.a und test.b gesetzt . Die Eingabewerte und <p> Werte innerhalb der Schleife werden ebenfalls auf den Anfangswert gesetzt.

Wenn ich die Werte innerhalb der Eingänge ändere, werden die <p> Werte innerhalb des ng-repeat Blocks korrekt aktualisiert, aber die <p> Tags in Block2 können nicht aktualisiert werden.

Warum ist das das Verhalten? Erstellt ng-repeat einen eigenen isolierten Bereich? Wenn ja, wie kann ich den Controller-Level-Bereich aktualisieren? Könnte jemand auch den Grund für dieses Verhalten und seine Vorteile erklären?

JSFiddle Showing the problem

Answer 1

ng-repeat erstellt einen untergeordneten Bereich für jedes wiederholte Element. Als Ergebnis versuchen Sie, einen primitiven Kindbereich zu übergeben, der keinen Verweis auf Eltern erstellt. Wenn Sie jedoch Objekte übergeben, übergeben Sie die ursprüngliche Objektreferenz.

aus dem Munde einer der Väter von Angular:

haben Sie immer einen Punkt in ng-Modell

This is a great video regarding Angular Best Practices von Angular Schöpfer gegeben (2012.12.11). Zum Minute 31 für gut erklärt Detail dieser genauen Situation

Ändern Daten Array von Objekten:

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

Dann in Repeater:

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

DEMO

Answer 2

versuchen Sie dies:

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

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

und

<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 nutzt die Tatsache, dass Objekte als Referenz übergeben werden. Wenn Sie also ein Objekt an eine Funktion übergeben und das Objekt innerhalb der Funktion ändern, ändert sich auch das Objekt außerhalb. Betrachten Sie diese aktualisierte JSFiddle