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

Question

I would like to ask you if you can give me a hand on this.

I have created a jsfiddle with my problem here. I need to generate dynamically some inputs with ng-model in a ng-repeater using the way ng-model="my_{{$index}}".

In jsfiddle you can see that everything it's working fine until I try to generate it dynamically.

The html would be:

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

And the 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;   }); } 

Can you give me any idea?

Thanks a lot.

Answer 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