11

我有一个 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 列中的意外令牌，从 [{{参数.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 -模型值。我不确定我想要完成的事情是否可能。我假设我需要通过控制器来实现我想要的，但任何帮助将不胜感激。

4

2 回答 2

25

您只需要使用哈希键作为模型：

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

还有许多其他方法，但这种方法比其他方法更简单。

于 2014-03-18T20:11:46.920 回答
0

我已经测试了这个解决方案，但它对我自己有问题。问题是参数“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>
于 2017-03-01T16:54:21.037 回答