Angular JS: input field will lose focus when a key is pressed

Question

The data that I use to populate the data

"StudentDetails": [ { "name": "name1", "code":"code1", "fields": { "username": "username1", "password": "sample", "key": 4513345667878 } }, { "name": "name2", "code":"code2", "fields": { "username": "username2", "secretkey": 1213145 } } ] 

and I fill it using the following template code

 <div ng-repeat="item in StudentDetails"> <div ng-repeat="(key,value) in StudentDetails.fields"> <div></div> <div><input type="text" ng-model="StudentDetails.fields[key]"/></div></div> </div> 

The parameters in the fields are changed for each object. The problem here is a single keystroke in the input field, the input field loses focus. I had to repeatedly press inside the input field to enter data. How to change the value in the input field without losing focus. I used "track by key" ... and also tried various answers sent to similar questions in StackOverflow, but that didn’t help. Please help with this script .. !!

Answer 1

The problem is that with every change to the model object, ng-repeat restores the entire array and thus erodes the input field.

You need to use the new ngRepeat syntax (introduced in 1.1.x) and use track by $index .

Further information in the angular documentation

 <div ng-repeat="(i, item) in StudentDetails track by i"> <div ng-repeat="(key,value) in StudentDetails.fields track by key"> <div></div> <div><input type="text" ng-model="StudentDetails.fields[key]"/></div> </div>