how to add ng-model to dynamically created input text fields

Question

This is my angularjs code to create input text fields dynamically.

<form action="demo_form.asp" method="get">
    //statically added textfields
    value1:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static1" required />
    value2:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static2" required />

    //dynamically adding textfields
    enter the number of new fields to be created:<input type="number" id="in_num"  />
    <button type="button" id="submit"> Create text fields </button>
    <div id="dynamicInput" ></div></td>

    //button to add values to the database
    <button type="submit" ng-click="addValues($event)> add to database </button>
</form>

"ng-click="addValues($event)"" helps add these values to a mongodb database which i have already done.

javascript code used to make these fields is:

 $(document).ready(function(e){
$('#submit').click(function(){     
 var inputIndex = $('#in_num').val();
    for( var i=0; i<inputIndex; i++)
    {
      $('#dynamicInput').append('<input type=text  id=id_'+ i +' style=width:100%; padding:12px 15px  ng-model=store.value'+i+'/>');
    }
});
});

On clicking the "add to database" button the values only from first and second textfields are geting added to the database but not the values added from the dynamically created textfields. Is there any way to do it?

Answer 1

Why don't you go through Add new text box on click of a button in angular js

http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically

Answer 2

Problem is that your dynamically added input fields do not have a click event when you add them with jQuery. Adding ng-click is not enough. You would have to use $compile to let angular parse this element.

However, the much smarter way is to not use jQuery at all and let the fields be generated by angular itself with ng-repeat .

 angular .module('app', []) .controller('dynamicFieldsController', dynamicFieldsController); dynamicFieldsController.$inject = ['$scope']; function dynamicFieldsController($scope){ var vm = this; vm.numOfFields = 0; vm.fields = []; vm.add = function() { for (var i = 0; i < vm.numOfFields; i++) { var index = vm.fields.length; vm.fields.push(index); } } } 

 input{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='dynamicFieldsController as vm'> <input placeholder='num of fields' ng-model='vm.numOfFields'> <button ng-click='vm.add()'>add</button> <input type='text' ng-repeat='field in vm.fields' value='{{ field }}'> </div> 

In this example you can add any number of elements and bind ng-click events to them. They will work out of the box, since parsed with angular. Your addValues function now simply has to use vm.fields to actually add the values to database.