AngularJS 形式的动态 ng-model 名称答案

【问题标题】：Dynamic ng-model name in AngularJS formAngularJS 形式的动态 ng-model 名称
【发布时间】：2014-04-24 17:49:51
【问题描述】：

我有一个 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]" （基于这个问题How can I set a dynamic model name in AngularJS?），但这没有评估并且无法设置 ng-model 值。我不确定我想要完成的事情是否可能。我假设我需要通过控制器来实现我想要的，但任何帮助将不胜感激。

【问题讨论】：

请注意：在您的 ng-repeat 中，您引用了 apiParameters，但仅在范围的 formData 中定义了参数。此外，小提琴或 plnkr 将有助于工作。
我认为您应该考虑编写一个具有隔离范围的指令，该指令允许您传入要修改的对象。也同意 Brocco 的观点，pnlkr 更适合解决问题，因为最终可以保存到 GitHub 并在将来使用以供参考。
正式注明。将来我会花时间添加一个小提琴，我会牢记指令方法。谢谢。

标签： angularjs angular-ngmodel

【解决方案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>

【讨论】：