Bound Input gets unfocused in angularjs

Question

I am running this simple code with angularjs :

HTML :

<div ng-app ng-controller="AController">
    <code>{{ itemsInArray }}</code>
    <div ng-repeat="item in itemsInArray">
        <input ng-model="itemsInArray[$index]" />
    </div>
</div>

JavaScript :

function AController($scope) {
    $scope.itemsInArray = ["strA", "strB", "strC"];
}

Binding appears to be working correctly when indexing into the array but after entering one character the input loses focus.
You can find the working code here on this fiddle : http://jsfiddle.net/QygW8/

You are facing problem because you are binding to primitive types and instead you should use object notation due to prototypical inheritance nature of javascript — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Feb 17, 2014 at 12:53

Chandermani · Accepted Answer · 2014-02-17 12:48:42Z

3

I think this is happening because you are manipulating the same item which is iterated over ng-repeat. So ng-repeat sees a change in the item and re-runs the `ng-repeat which regenerates the items.

If you look at your fiddle html, you may notice this effect.

To make it work, one way you can do this

http://jsfiddle.net/cmyworld/CvLBS/

where you change your array to object array

$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];

and then bind to item.data

answered Feb 17, 2014 at 12:48

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

putvande · Accepted Answer · 2014-02-17 12:44:21Z

0

Try to change the model:

<div ng-repeat="item in itemsInArray">
    <input ng-model="item" />
</div>

answered Feb 17, 2014 at 12:44

putvande

15.3k3 gold badges37 silver badges51 bronze badges

1 Comment

Evan Levesque Over a year ago

The binding will be stopped

Fidel · Accepted Answer · 2014-02-17 13:00:09Z

0

Even am an newbie to the angularjs, up-to my findings ng-repeat updates/repeats and recreates the whole HTML elements when there is an change in the model. Hence when a single character added to model causes ng-repeat to react and creates the all the HTML elements again which results to losing the focus.

This is an fiddle , In which u will be able to observer the changes with the model inside the ng-repeat and outside the ng-repeat.

Sorry i don't have the solution, Hope using ng-change apart of ng-model may help.

answered Feb 17, 2014 at 13:00

Fidel

1,0371 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Bound Input gets unfocused in angularjs

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related