Динамическое имя ng-модели в форме AngularJS

У меня есть форма AngularJS, где я использую ng-repeat для динамического построения полей формы на основе другого выбора. Я пытаюсь генерировать имя модели динамически и сталкиваюсь с проблемами.

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters.{{parameter.paramName}}" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

Мне нужно, чтобы это превратилось в нечто вроде ng-model = "formData.parameters.fooId" или ng-model = "formData.parameters.barId"

Приведенное выше приводит к ошибке: Ошибка: [$ parse: синтаксис] Ошибка синтаксиса: токен '{' является неожиданным токеном в столбце 21 выражения [formData.parameters. {{Parameter.paramName}}], начиная с [{{parameter.paramName}}].

В моем контроллере я:

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

Я также попробовал ng-model = "formData.parameters. [parameter.paramName]" (на основе этого вопроса Как установить динамическое имя модели в AngularJS?), но это не eval и не может установить значение ng-model. Я не уверен, что то, что я пытаюсь сделать, даже возможно. Я предполагаю, что мне нужно пройти через контроллер, чтобы добиться того, чего я хочу, но любая помощь будет оценена.

Ответ 1

Вам просто нужно использовать хеш-ключ как модель:

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

Существует много других подходов, но это проще других.

Ответ 2

Я тестировал это решение, но у него есть проблема для себя. Проблема в том, что параметр "formData" присваивается каждой итерации индивидуально. Другими словами, если вы вставляете тег pre на каждой итерации, вы увидите значение каждой итерации индивидуально, и вы не сможете получить все formData в контроллере после отправки формы.

Для этого я нашел очень простое решение, и это ng-init!!!!

Просто добавьте этот код в свою форму и перед повторным тегом. Для примера этого вопроса мы будем иметь:

<form ng-init="formData = []">
    <div class="form-group" ng-repeat="parameter in apiParameters">
        <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
        </div>
    </div>
</form>