Question

是否可以创建一个迭代对象属性的动态表单控件？

我的目标是扩展一个对象＆＃34; cluster.properties＆＃34;并允许用户添加任何新的键/值对。我可以使用下面的代码段打印值。但我无法在用户可以更改密钥或值或甚至为对象添加更多属性的情况下进行此编辑。

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

</div>

有没有正确的方法呢？

此致

Answer 1

这里你去：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。

Answer 2

在javascript中，您无法动态更改现有对象属性名称。

我的建议是编辑您创建按钮的现有按钮，该按钮具有将键和值复制到另一组输入的功能，如果键被编辑，您将需要创建一个新属性并删除旧属性

角度上的动态表单字段

2 个答案: