角度上的動態表單字段

是否可以創建一個動態表單控件來迭代對象的屬性？角度上的動態表單字段

我的目標是擴展一個對象「cluster.properties」，並允許用戶添加任何新的鍵/值對。我可以使用下面的代碼片段打印這些值。但是我不能在用戶可以更改鍵或值的情況下進行編輯，甚至可以向對象添加更多屬性。

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

</div>

有沒有正確的方法呢？

Regards

來源

2016-10-12 Vinicius Carvalho

我認爲這是可能的。我會創建兩個方法：'updateKey（k，v）'和'updateValue（k，v）'。在updateKey中，您需要設置'cluster.properties [k] = undefined'並將v移動到新的'cluster.properties [k]'。這是我第一次想到它時想到的......這是一個有趣的概念。我想試試這個！ – Zach

在JavaScript中，您不能動態更改現有的對象屬性名稱。

我的建議是編輯現有的你創建一個按鈕的功能，該功能將鍵和值複製到另一組輸入，如果鍵被編輯，您將需要創建一個新的屬性，並刪除舊的

來源

2016-10-12 19:50:57 charlietfl

這裏亞去：http://plnkr.co/edit/xAgm0ny6yAB8spd5Oiai?p=preview

你也許可以簡化這個和原來的值存儲在隱藏字段，看看他們是否改變，並減少它每次重複都只是一個更新按鈕，但這是一個開始！

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

來源

2016-10-12 20:32:40 Zach

謝謝，這看起來非常好。在發送到後端之前，我最終使用了一個單獨的{key：「」，value：「」}對象數組，然後我將它們放到{key：value}對象中 –

Ok。這是做這件事的另一種方式！：d – Zach

角度上的動態表單字段

回答

相關問題