Dynamische Formularfelder auf Winkel

Question

ist es möglich, eine dynamische Formularsteuerung zu erstellen, die über Eigenschaften eines Objekts iteriert?

Mein Ziel ist es, ein Objekt "cluster.properties" zu erweitern und Benutzern zu erlauben, jedes neue Paar Schlüssel/Wert hinzuzufügen. Ich kann die Werte mit dem folgenden Ausschnitt ausdrucken. Aber ich kann dies nicht bearbeiten, wenn Benutzer den Schlüssel oder Wert ändern oder dem Objekt sogar weitere Eigenschaften hinzufügen können.

<div ng-controller="MyCtrl"> 
    <div ng-repeat="(k,v) in cluster.properties"> 
    <input ng-model="k"> 
    <input ng-model="v"> 
    </div> 

</div> 

Gibt es einen richtigen Weg, dies zu tun?

Grüße

Answer 1

In Javascript Sie nicht dynamisch kann ein vorhandenes Objekt Eigenschaftsnamen ändern.

Mein Vorschlag ist, bestehende bearbeiten Sie eine Taste mit einer Funktion erstellen, dass die Kopien der Schlüssel und Wert auf einem anderen Satz von Eingängen und wenn der Schlüssel bearbeitet wird eine neue Eigenschaft erstellen muß, und entfernen Sie die alten

Hier

Answer 2

ya gehen: http://plnkr.co/edit/xAgm0ny6yAB8spd5Oiai?p=preview

Sie wahrscheinlich diese vereinfachen könnte und speichern Sie die ursprünglichen Werte in versteckten Feldern zu sehen, ob sie geändert und reduzieren sie auf nur eine Update-Button pro Wiederholung, aber das ist ein Anfang!

<div ng-repeat="(k,v) in myCtrl.myObject"> 
    <input type="hidden" ng-model="k"> 
    <div> 
    Key: <input ng-model="newKey" ng-value="k" /> 
    <button ng-click="myCtrl.updateKey(k, newKey, v)">Update</button> 
    </div> 
    <div> 
    Value: <input ng-model="v" /> 
    <button ng-click="myCtrl.updateValue(k,v)">Update</button> 
    </div> 
    <hr /> 
</div> 

und die Funktionen:

vm.updateKey = function(k, newKey, v) { 
    // newKey will be undefined if nothing changed 

    // Check to see if it changed 
    if(k != newKey && newKey !== undefined) { 
    // If it's empty... delete it 
    if(newKey != '') { 
     vm.myObject[newKey] = v; 
    } 
    delete vm.myObject[k]; 
    } 
}; 

vm.updateValue = function(k, v) { 
    vm.myObject[k] = v; 
}; 

Einige andere Überlegungen, die Sie berücksichtigen sollten, sind: Was ist, wenn die neuen Eigenschaftsnamen Konflikte mit anderen? Auch - mein Kommentar über die Einstellung auf undefined ist nicht ausreichend. Sie müssen das Schlüsselwort delete verwenden, sonst wird das ng-repeat nicht korrekt aktualisiert.