角度の動的フォームフィールド

Question

オブジェクトのプロパティを繰り返し処理する動的フォームコントロールを作成することは可能ですか？

私の目標は、オブジェクト "cluster.properties"を拡張し、ユーザーが新しいキー/値のペアを追加できるようにすることです。私は以下のスニペットを使って値を印刷することができます。しかし、ユーザーがキーや値を変更したり、オブジェクトにプロパティを追加することができる場所では、これを編集可能にすることはできません。

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

</div> 

正しい方法がありますか？

よろしくお願いいたします。

Answer 1

JavaScriptでは、既存のオブジェクトプロパティ名を動的に変更することはできません。

キーと値を別の入力セットにコピーするボタンと既存のボタンを編集することをお勧めします。キーが編集されると、新しいプロパティを作成して古いものを削除する必要があります

ここで

Answer 2

屋に行く：http://plnkr.co/edit/xAgm0ny6yAB8spd5Oiai?p=preview

あなたはおそらくこれを単純化し、彼らが変更された場合見ると、繰り返しごとに1つの更新ボタンにそれを減らすために非表示フィールドの元の値を格納するが、これはスタートですでした！

<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> 

と機能：

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; 
}; 

あなたが考慮すべきいくつかの他の考慮事項は次のとおりです。何か別のを使用して新しいプロパティ名の競合か？また、上記の私のコメントはundefinedに設定することでは不十分です。 deleteキーワードを使用する必要があります。そうしないと、ng-repeatが正しく更新されません。