我有一个 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}}] 开始。
在我的 Controller 中,我有:
$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 值。我不确定我想要完成的事情是否有可能实现。我假设我需要通过 Controller 来实现我想要的,但任何帮助将不胜感激。
最佳答案
您只需要使用哈希键作为模型:
<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>
还有许多其他方法,但这种方法比其他方法简单。
关于angularjs - AngularJS 形式的动态 ng-model 名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22489683/