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

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.