Динамические поля формы на angular

#angularjs

Вопрос:

возможно ли создать динамический элемент управления формой, который выполняет итерацию по свойствам объекта?

Моя цель — расширить объект «cluster.properties» и позволить пользователям добавлять любую новую пару ключ / значение. Я могу распечатать значения, используя фрагмент ниже. Но я не могу сделать это доступным для редактирования, где пользователи могут изменять ключ или значение или даже добавлять дополнительные свойства к объекту.

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

</div>

Есть ли правильный способ сделать это?

С уважением

1. Я думаю, что это возможно. Я бы создал два метода: updateKey(k, v) и updateValue(k, v) . В updateKey вам нужно установить cluster.properties[k] = undefined и переместить v в новое cluster.properties[k] . Это то, что приходит на ум, когда я впервые думаю об этом… Это интересная концепция. Я хочу попробовать это!

Ответ №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 amp;amp; 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 должным образом.

1. Спасибо, это выглядит действительно красиво. В итоге я использовал отдельный массив объектов {key: «»,value:»»}, которые я сглаживаю в объект { key: value} перед отправкой на серверную часть

2. ОК. Это еще один способ сделать это! : D

Ответ №2:

В javascript вы не можете динамически изменять существующее имя свойства объекта.

Я предлагаю отредактировать существующие: вы создаете кнопку с функцией, которая копирует ключ и значение в другой набор входных данных, и если ключ будет отредактирован, вам нужно будет создать новое свойство и удалить старое