AngularJS形式的动态ng模型名称

跳水

我有一个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 -模型值。我不确定我要完成的目标是否可能。我假设我需要遍历控制器才能实现我想要的功能,但是任何帮助将不胜感激。

谢尔盖·莫伊谢夫(Sergey Moiseev)

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJs,如何分配动态模型名称

来自分类Dev

AngularJs,如何分配动态模型名称

来自分类Dev

返回范围变量的AngularJS动态Ng模型

来自分类Dev

将动态ng模型转换为ng-repeat AngularJS

来自分类Dev

AngularJS-多种形式-一个ng模型?

来自分类Dev

AngularJS:在模板中使用动态名称访问模型

来自分类Dev

生成动态ng模型以在angularJS中进行表单控制

来自分类Dev

AngularJS:ng模型动态绑定不起作用

来自分类Dev

生成动态ng模型以在angularJS中进行表单控制

来自分类Dev

AngularJS-具有动态大小的数组的ng模型

来自分类Dev

ng-repeat中表单的AngularJs动态名称

来自分类Dev

在AngularJS中为ng-model创建动态名称

来自分类Dev

动态形式和AngularJs

来自分类Dev

AngularJS动态模型

来自分类Dev

AngularJs动态模型生成

来自分类Dev

AngularJS:ng-repeat中的动态ng-model名称和显示输入字段之和

来自分类Dev

ng-repeat中的动态ng模型

来自分类Dev

AngularJS ng-模型不适用于动态创建的输入字段

来自分类Dev

AngularJS ng-模型不适用于动态创建的输入字段

来自分类Dev

使用angularjs的动态长度形式

来自分类Dev

在AngularJS中创建动态模型

来自分类Dev

在AngularJS中动态生成模型

来自分类Dev

AngularJs:如何在模型中使用重复对象作为子字符串。生成动态ng模型

来自分类Dev

AngularJS使ng-bind-html成为动态构造的对象名称

来自分类Dev

AngularJS-使用ng-model动态名称访问输入数组

来自分类Dev

AngularJS形式ng-attr

来自分类Dev

angularjs中的依赖ng模型

来自分类Dev

AngularJS指令更改ng模型

来自分类Dev

以表格形式加载动态模型属性-Django