How to generates dynamically ng-model="my_{{$index}}" with ng-repeat in AngularJS?

Solution 1:

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

Solution 2:

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/

Solution 3:

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.