AngularJS 形式的动态 ng-model 名称 [英] Dynamic ng-model name in AngularJS form

问题描述

我有一个 AngularJS 表单，我使用 ng-repeat 根据另一个选择动态构建表单的字段.我正在尝试动态生成模型名称，但遇到了问题.

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

我需要的是将其评估为 ng-model="formData.parameters.fooId" 或 ng-model="formData.parameters.barId"

以上导致错误:错误:[$parse:syntax] 语法错误:标记{"是表达式 [formData.parameters.{{parameter.paramName}}] 的第 21 列处的意外标记，从 [{{parameter.paramName}}] 开始.

在我的控制器中，我有:

$scope.formData = {};$scope.formData = {设置:{api端点:''，方法:'获取'},参数: {}};

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

解决方案

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

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

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

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>

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

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}}].

In my controller I have:

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

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-model 名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！