wake-up-neo.com

Binden von Eingaben an ein Array von Grundelementen mit ngRepeat => nicht bearbeitbare Eingaben

Hier ist eine Demo zu meinem Problem.

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

Kann mir jemand erklären, warum die Eingaben nicht editierbar/schreibgeschützt sind? Wenn es beabsichtigt ist, was ist das Grundprinzip dahinter?

UPDATE 20.02.2014

Es sieht so aus, als wäre dies für v1.2.0 + Demo kein Problem mehr. Beachten Sie jedoch, dass die Benutzersteuerelemente jetzt mit den neueren angleJS-Versionen bearbeitet werden können, es sich jedoch um die Eigenschaft num im untergeordneten Gültigkeitsbereich handelt = , nicht der übergeordnete Bereich, der geändert wird. Mit anderen Worten, das Ändern der Werte in den Benutzersteuerelementen wirkt sich nicht auf das Array myNumbers aus.

angularjsangularjs-scopeangularjs-ng-repeat
41
tamakisquare

Kann mir jemand erklären, warum die Eingaben nicht editierbar/schreibgeschützt sind? Wenn es beabsichtigt ist, was ist das Grundprinzip dahinter?

Es ist beabsichtigt, ab Angular= 1.0. . Artem hat eine sehr gute Erklärung wie 1.0.3+ funktioniert, wenn Sie "binde direkt an jedes ng-repeat Item" - dh

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

Wenn Ihre Seite zum ersten Mal gerendert wird, sehen Sie hier ein Bild Ihrer Bereiche (ich habe eines der Array-Elemente entfernt, damit das Bild weniger Kästchen enthält):

enter image description here (zum Vergrößern anklicken)

Gestrichelte Linien zeigen die Vererbung des prototypischen Bereichs.
Graue Linien zeigen Beziehungen zwischen Kind und Eltern (d. H. Welche $parent Verweise).
Braune Linien zeigen $$ nextSibling.
Graue Kästchen sind Grundwerte. Blaue Kästchen sind Arrays. Lila sind Objekte.

Beachten Sie, dass die SO meine Antwort, auf die Sie in einem Kommentar verwiesen haben, vor 1.0.3 geschrieben wurde. Vor 1.0.3 wurden die num -Werte in den untergeordneten Bereichen von ngRepeat verwendet Tatsächlich ändern Sie sich, wenn Sie in die Textfelder tippen. (Diese Werte wären im übergeordneten Bereich nicht sichtbar.) Seit 1.0.3 ersetzt ngRepeat jetzt die Werte des Bereichs ngRepeat num durch die (unveränderten) Werte des übergeordneten Bereichs Das Array myNumbers des/MainCtrl-Bereichs während eines Digest-Zyklus. Dies macht die Eingaben im Wesentlichen unbearbeitbar.

Das Update besteht darin, ein Array von Objekten in Ihrer Hauptsteuerung zu verwenden:

$scope.myNumbers = [ {value: 10}, {value: 20} ];

und binden Sie dann an die Eigenschaft value des Objekts in ngRepeat:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>
67
Mark Rajcok

Dieses Problem wird jetzt in neueren Versionen von AngularJS mit der Funktion track by Behoben, die Repeater über Primitive ermöglicht:

<div ng-repeat="num in myNumbers track by $index">
  <input type="text" ng-model="myNumbers[$index]">
</div>

Die Seite wird nach jedem Tastendruck nicht neu gezeichnet, wodurch das Problem des verlorenen Fokus behoben wird. Das offizielle AngularJS-Dokument ist ziemlich vage und verwirrend.

33
sebnukem

Ich hatte ein ähnliches Problem (und benötigte auch Funktionen zum Hinzufügen und Entfernen) und löste das Problem folgendermaßen:

$scope.topics = [''];
$scope.removeTopic = function(i) {
   $scope.topics.splice(i, 1); 
}

<div ng-repeat="s in topics track by $index">
    <input ng-model="$parent.topics[$index]" type="text">
    <a ng-click="removeTopic($index)">Remove</a>
</div>

<a ng-click="topics.Push('new topic')">Add</a>
9
aidan

ngRepeat verwendet einen Verweis auf das Quell-Array. Da integer (Number in js) ein Wert Typ ist, kein Verweis Typ, kann daher nicht per Referenz in Javascript übergeben werden. Die Änderung wird nicht weitergegeben.

Hier ist eine Demonstration:

   var x = 10;
   var ox = {value:10};

   var y = x;
   var oy = ox;

   y = 15
   oy.value = 15;

Was wären die Werte von x und ox?

>> x = 10;
>> y = 15;
>> ox = {value:15};
>> oy = {value:15};

Alle Javascript-Objekte werden als Referenz übergeben, und alle Grundelemente werden als Wert ["Zeichenfolge", "Zahl" usw.] übergeben.

Working Plunker http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58

9
Umur Kontacı

Anscheinend kann Angular nicht in ein so definiertes Modell schreiben. Verwenden Sie den Verweis auf das ursprüngliche $ scope-Attribut, damit es den Wert richtig bindet:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="myNumbers[$index]">
</div>
9
Dmitry Evseev