AngularJS表单中的动态ng模型名称

Question

我有一个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:syntax]语法错误:令牌'{'是表达式[formData.parameters.{{parameter.paramName}}]的第21行的意外标记,从[{{开始parameter.paramName}}].

在我的控制器中我有:

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

我也尝试过ng-model ="formData.parameters.[parameter.paramName]"(基于这个问题我如何在AngularJS中设置动态模型名称？),但是没有评估并且无法设置ng - 模型值.我不确定我想要完成的是否可能.我假设我需要通过控制器来实现我想要的,但任何帮助将不胜感激.

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

还有许多其他方法,但这个方法比其他方法简单.