角度上的动态表单字段

是否可以创建一个动态表单控件来迭代对象的属性？角度上的动态表单字段

我的目标是扩展一个对象“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

角度上的动态表单字段

回答

相关问题