Angular JS: Input box losing focus on keypress

Question

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

Answer 1

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>