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