在AngularJS形式动态NG-型号名称 [英] Dynamic ng-model name in AngularJS form

问题描述

我在那里我使用NG-重复构建动态的基础上另一种选择表单的字段的AngularJS形式。我试图动态生成的型号名称和我遇到了问题。

I have an AngularJS form where I'm using ng-repeat to build the fields of the form dynamically based on another selection. I'm trying to generate the model name dynamically and am running into problems.

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

我需要的是它的eval喜欢的东西NG模型=formData.parameters.fooId或NG-模式=formData.parameters.barId

What I need is it to eval to something like ng-model="formData.parameters.fooId" or ng-model="formData.parameters.barId"

以上导致一个错误：
错误：[$解析：语法]语法错误：令牌'{'处于前pression的21列意外的标记[formData.parameters {{parameter.paramName}}]开始[{{parameter.paramName }}]

The above results in an error: Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 21 of the expression [formData.parameters.{{parameter.paramName}}] starting at [{{parameter.paramName}}].

在我的控制器我有：

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

我也试过NG模型=formData.parameters [parameter.paramName]。（基于这个问题<一href=\"http://stackoverflow.com/questions/12553617/how-can-i-set-a-dynamic-model-name-in-angularjs\">How我可以在AngularJS设置一个动态模型的名字吗？），但也不至于评估和未能设定NG-模型值。我不知道如果我想要完成甚至有可能。我假设我需要去通过控制器来实现我想要的，但任何帮助将是AP preciated。

I've also tried ng-model="formData.parameters.[parameter.paramName]" (based on this question How can I set a dynamic model name in AngularJS?), but that doesn't eval and fails to set the ng-model value. I'm not sure if what I'm trying to accomplish is even possible. I'm assuming I need to go through the controller to achieve what I want, but any help would be appreciated.

推荐答案

您只需要使用哈希键模式：

You just need to use hash key as model:

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

还有很多其他的方法，但是这一次是比别人更简单。

There is many other approaches, but this one are simpler than others.

这篇关于在AngularJS形式动态NG-型号名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！