Zweiweg Arbeits Bindung nicht mit ng-repeat

Question

ich eine einfache ng-Repeat-Liste, in denen ich auf dem Controller auf eine andere Eigenschaft aktuelle Liste Elementwert am Zuordnung wie folgt:

<li ng-repeat="num in list"> 
    <input type="text" ng-init="value = num" ng-model="value" /> 
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button> 
    </li> 

Aber wenn ich klicken Mit der Schaltfläche Speichern erhalte ich den Standardwert für $ scope.value. Ich erwarte, dass der Wert für den bestimmten Eingabetext angezeigt wird. Hier

ist die Steuerung:

angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = false; 
     $scope.list = [0, 1, 2, 3, 4]; 

     $scope.save = function() { 
     alert($scope.value); 
     } 
    }); 

Wie kann ich den aktualisierten Wert eines Eingangspunkt in meinem Controller Zugriff auf Funktionsaufruf speichern. Hier

ist der Plunker für das gleiche: plnkr

aktualisieren: Ich den Wert erwarten geholt werden, ohne den Controller als Parameter übergeben.

Answer 1

hier ist es wie können Sie das tun

<li ng-repeat="num in list"> 
    <input type="text" ng-init="value = num" ng-model="value" /> 
    <button type="button" class="btn btn-primary" ng-click="save(value)">Save</button> 
    </li> 


angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = false; 
     $scope.list = [0, 1, 2, 3, 4]; 

     $scope.save = function(argument) { 
     $scope.value = argument; 
     alert($scope.value); 
     } 
    }); 

Answer 2

Lässt den Ausdruck nicht missbrauchen „2-Wege-Bindung“;)

Ihr Controller einen Umfang hat und es ist nur eine $scope.value, dass Umfang. Sie können nicht erzwingen, mehrere Werte gleichzeitig zu haben.

ng-repeat erstellt neuen Bereich für jede li. Und selbst wenn Sie versuchen $parent.value zu verwenden, $scope.value Ihr Controller wird nur die zuletzt zugewiesene Wert in ng-init

Sie beste Wette in diesem Fall den Wert als Argument zu übergeben. Hoffe, das hat dazu beigetragen, das Problem ein wenig mehr zu erklären. Korrigiere mich, wenn ich falsch liege.

Answer 3

ngRepeat Erstellen Sie einen Bereich, also Objekt wird durch Referenz und Zahl nach Wert übergeben. Ihr Code ist problematisch, wenn Sie den Wert erfolgreich aktualisieren, werden alle Zahlen in ng-repeat aktualisiert. Sie können dies tun:

html

{{value.val}} <!-- for check the value --> 
<li ng-repeat="num in list"> 
    <input type="text" ng-model="num" /> 
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button> 
    </li> 

Javascript

angular.module('myApp', []) 
    .controller('MyController', function($scope){ 
     $scope.value = {val:false}; 
     $scope.list = [0,1,2,3,4]; 
}); 

http://jsfiddle.net/oq6zdeLd/

tut mir leid, mein Englisch ...

Answer 4

Wo w Ich kann nicht glauben, dass die meisten Menschen dies vermisst haben. Wenn Sie Angular 1.2 verwenden, sollten Sie unbedingt das Schlüsselwort track by in Ihrer ngRepeat-Direktive überprüfen.

<li ng-repeat="num in list track by $index"> 
    <input type="text" ng-model="list[$index]" /> 
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button> 
</li> 

Unterm Strich ist bleiben weg von primitiven Typen, wenn verbindlich, da es Ihnen Probleme synchronisieren geben.

Fellas bitte mehr Zeit und Mühe in die Erforschung Ihrer Lösungen statt nur für Punkte posten.

Hoffe, das hilft!