Angular JS: Input box losing focus on keypress

angularjs

Solution

The problem is that with every change to the model object the ng-repeat regenerates the whole array and so blurs your input box.

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

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

Problem

the mock data I am using for populating data is ``` "StudentDetails": [ { "name": "name1", "code":"code1", "fields": { "username": "username1", "password": "sample", "key": 4513345667878 } }, { "name": "name2", "code":"code2", "fields": { "username": "username2", "secretkey": 1213145 } } ] ``` and I am populating 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 changes for every object. The problem here is on a single keypress in the input box,the input box is losing focus.I had to click inside the input box repeatedly for entering the data. How can I change the value in the input box without the box losing focus. I have used "track by key" ...and also tried various answers posted to the similar questions in StackOverflow,but that didn't help Please help with this scenario..!!

Original source