How to generates dynamically ng-model="my_{{$index}}" with ng-repeat in AngularJS?
Does it solve your problem?
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;
}
});
}
And in your controller:
<tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td><input type="text" ng-model="models[param] " />field_{{$index}}</td>
</tr>
Fiddle
What you could do is to create an object on a scope (say, values
) and bind to the properties of this object like so:
<input type="text" ng-model="values['field_' + $index]" />
Here is a jsFiddle illustrating the complete solution: http://jsfiddle.net/KjsWL/
I did elaborate my answer from pkozlowski's and try to generate a dynamic form, with dynamic ng-model:
<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>
But first, we need to define the 'human' scope inside our controller
$scope.human= {};
And then, on submission we will have the data like this (depending on how much field is generated):
var name = human.adult[i].name;
var sex = human.adult[i].sex;
var age = human.adult[i].age;
It's pretty straightforward and I hope my answer helps.