我想问你,你能不能帮我一把。
我在这里创建了一个带有我的问题的 jsfiddle。我需要使用 ng-model="my_{{$index}}" 的方式在 ng-recter 中使用 ng-model 动态生成一些输入。
在 jsfiddle 中,您可以看到一切正常,直到我尝试动态生成它。
html 将是:
<div ng-app>
<div ng-controller="MainCtrl">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<select ng-model="selectedQuery"
ng-options="q.name for q in queryList" >
<option title="---Select Query---" value="">---Select Query---</option>
</select>
</td>
</tr>
<tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td><input type="text" ng-model="field_X" />field_{{$index}}</td>
</tr>
</table>
<div>
<div>
还有JavaScript...
function MainCtrl($scope) {
$scope.queryList = [
{ name: 'Check Users', fields: [ "Name", "Id"] },
{ name: 'Audit Report', fields: [] },
{ name: 'Bounce Back Report', fields: [ "Date"] }
];
$scope.$watch('selectedQuery', function (newVal, oldVal) {
$scope.parameters = $scope.selectedQuery.fields;
});
}
你能告诉我任何想法吗?
多谢。
它能解决你的问题吗?
function MainCtrl($scope) {
$scope.queryList = [
{ name: 'Check Users', fields: [ "Name", "Id"] },
{ name: 'Audit Report', fields: [] },
{ name: 'Bounce Back Report', fields: [ "Date"] }
];
$scope.models = {};
$scope.$watch('selectedQuery', function (newVal, oldVal) {
if ($scope.selectedQuery) {
$scope.parameters = $scope.selectedQuery.fields;
}
});
}
在控制器中:
<tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td><input type="text" ng-model="models[param] " />field_{{$index}}</td>
</tr>
小提琴
你可以做的是在作用域(比如values
)上创建一个对象,并绑定到这个对象的属性,如下所示:
<input type="text" ng-model="values['field_' + $index]" />
下面是一个说明完整解决方案的 jsFiddle:http://jsfiddle.net/KjsWL/
我确实从 pkozlowski 的答案中阐述了我的答案,并尝试使用动态 ng 模型生成一个动态形式:
<form ng-submit="testDynamic(human)">
<input type="text" ng-model="human.adult[($index+1)].name">
<input type="text" ng-model="human.adult[($index+1)].sex">
<input type="text" ng-model="human.adult[($index+1)].age">
</form>
但首先,我们需要在控制器中定义"人类"范围
$scope.human= {};
然后,在提交时,我们将获得这样的数据(取决于生成多少字段):
var name = human.adult[i].name;
var sex = human.adult[i].sex;
var age = human.adult[i].age;
这很简单,我希望我的答案有所帮助。
是否有理由生成这些字段名称? 您可以将每个字段视为具有名称和值而不是字符串名称的对象吗?(小提琴)
function MainCtrl($scope) {
$scope.queryList = [
{ name: 'Check Users', fields: [ { name: "Name" }, { name: "Id" } ] },
{ name: 'Audit Report', fields: [] },
{ name: 'Bounce Back Report', fields: [ { name: "Date" } ] }
];
}
只需重复selectedQuery.fields
<tr ng-repeat="field in selectedQuery.fields">
<td>{{field.name}}:</td>
<td><input type="text" ng-model="field.value" /></td>
</tr>
Beterraba的回答对我很有帮助。 但是,当我不得不将解决方案迁移到 Typescript 时,它不适合我。 这是我所做的。 我将各个参数(示例中 queryList 上的字段)扩展为包含"值"字段的完整对象。 然后我绑定到"值"字段,效果很好!
最初你有:
[
{ name: 'Check Users', fields: [ "Name", "Id"] },
...
}
]
我把它改成这样:
[
{ name: 'Check Users', fields: [
{Text:"Name",Value:""},
{Text:"Id",Value:0}],
...
]
}
]
。并绑定到"值"子字段。
如果你关心的话,这是我的打字稿。
在 html 中:
<div ng-repeat="param in ctrl.sprocparams" >
<sproc-param param="param" />
</div>
在使用角度材质的 sproc-param 指令中。看看我在哪里将ng模型绑定到参数。价值:
return {
restrict: 'E',
template: `
<md-input-container class="md-block" flex-gt-sm>
<label>{{param.Name}}</label>
<input name="{{param.Name}}" ng-model=param.Value></input>
</md-input-container>`,
scope: {
param: "="
}
}
我需要使用 ng 中继器中的 ng-model 动态生成一些输入,使用
ng-model="my_{{$index}}"
.
可以将 this
标识符与括号表示法属性访问器一起使用:
<tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td>
<input type="text" ng-model="this['my_'+$index]" />
my_{{$index}}
</td>
</tr>
可以使用标识符this
访问$scope对象。
有关详细信息,请参阅
- AngularJS 开发人员指南 - 表达式上下文