Difficulty with ng-model ng-repeat and inputs

Question

I am trying to allow the user to edit a list of items by using ngRepeat and ngModel   See this fiddle   However  both approaches I ve tried lead to bizarre behavior  one doesn t update the model  and the other blurs the form on each keydown   Am I doing something wrong here  Is this not a supported use case   Here is the code from the fiddle  copied for convenience     lt html ng-app gt       lt head gt           lt link href    netdna bootstrapcdn com twitter-bootstrap 2 2 1 css bootstrap-combined min css  rel  stylesheet  gt       lt  head gt       lt body ng-init  names     Sam    Harry    Sally    gt           lt h1 gt Fun with Fields and ngModel lt  h1 gt           lt p gt names    names   lt  p gt           lt h3 gt Binding to each element directly  lt  h3 gt           lt div ng-repeat  name in names  gt              Value    name                lt input ng-model  name  gt                                    lt  div gt           lt p class  muted  gt The binding does not appear to be working  the value in the model is not changed  lt  p gt           lt h3 gt Indexing into the array  lt  h3 gt           lt div ng-repeat  name in names  gt              Value    names  index                 lt input ng-model  names  index   gt                                    lt  div gt           lt p class  muted  gt Type one character  and the input field loses focus  However  the binding appears to be working correctly  lt  p gt       lt  body gt   lt  html gt

User · Answer

Using Angular latest version  1 2 1  and track by  index  This issue is fixed  http   jsfiddle net rnw3u 53    lt div ng-repeat   i  name  in names track by  index  gt      Value    name        lt input ng-model  names i   gt                            lt  div gt

User · Answer

This seems to be a binding issue    The advice is don t bind to primitives   Your ngRepeat is iterating over strings inside a collection  when it should be iterating over objects  To fix your problem   lt body ng-init  models     name  Sam    name  Harry    name  Sally     gt       lt h1 gt Fun with Fields and ngModel lt  h1 gt       lt p gt names    models   lt  p gt       lt h3 gt Binding to each element directly  lt  h3 gt       lt div ng-repeat  model in models  gt          Value    model name            lt input ng-model  model name  gt                                lt  div gt    jsfiddle  http   jsfiddle net jaimem rnw3u 5

User · Answer

how do something like    lt select ng-model  myModel  index 1   gt    And in my inspector element be    lt select ng-model  myModel1  gt       lt select ng-model  myModel2  gt

User · Answer

The problem seems to be in the way how ng-model works with input and overwrites the name object  making it lost for ng-repeat   As a workaround  one can use the following code    lt div ng-repeat  name in names  gt      Value    name        lt input ng-model  names  index   gt                            lt  div gt    Hope it helps

User · Answer

I just updated AngularJs to 1 1 2 and have no problem with it  I guess this bug was fixed   http   ci angularjs org job angular js-pete 57 artifact build angular js

User · Answer

I tried the solution above for my problem at it worked like a charm  Thanks   http   jsfiddle net leighboone wn9Ym 7   Here is my version of that   var myApp   angular module  myApp        function MyCtrl  scope         scope models              name   Device1           checked  true                  name   Device1           checked  true                  name   Device1           checked  true              and my HTML   lt div ng-app  myApp  gt       lt div ng-controller  MyCtrl  gt            lt h1 gt Fun with Fields and ngModel lt  h1 gt           lt p gt names    models   lt  p gt           lt table class  table table-striped  gt               lt thead gt                   lt tr gt                       lt th gt  lt  th gt                       lt th gt Feature 1 lt  td gt                       lt th gt Feature 2 lt  th gt                       lt th gt Feature 3 lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr gt                       lt td gt Device lt  td gt                      lt td ng-repeat  modelCheck in models  class    gt   lt span gt                                        modelCheck checked                                    lt  span gt                        lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt                           lt label class  control-label  gt Which devices  lt  label gt                       lt  td gt                       lt td ng-repeat  model in models  gt   model name                            lt input type  checkbox  class  checkbox inline  ng-model  model checked    gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt

User · Answer

If you don t need the model to update with every key-stroke  just bind to name and then update the array item on blur event    lt div ng-repeat  name in names  gt      Value    name        lt input ng-model  name  ng-blur  names  index    name    gt   lt  div gt

User · Answer

You get into a difficult situation when it is necessary to understand how scopes  ngRepeat and ngModel with NgModelController work  Also try to use 1 0 3 version  Your example will work a little differently   You can simply use solution provided by jm-  But if you want to deal with the situation more deeply  you have to understand    how AngularJS works  scopes have a hierarchical structure  ngRepeat creates new scope for every element  ngRepeat build cache of items with additional information  hashKey   on each watch call for every new item  that is not in the cache  ngRepeat constructs new scope  DOM element  etc  More detailed description  from 1 0 3 ngModelController rerenders inputs with actual model values    How your example  Binding to each element directly  works for AngularJS 1 0 3    you enter letter  f  into input  ngModelController changes model for item scope  names array is not changed     name     Samf   names      Sam    Harry    Sally     digest loop is started  ngRepeat replaces model value from item scope   Samf   by value from unchanged names array   Sam    ngModelController rerenders input with actual model value   Sam      How your example  Indexing into the array  works    you enter letter  f  into input  ngModelController changes item in names array     names      Samf    Harry    Sally     digest loop is started  ngRepeat can t find  Samf  in cache  ngRepeat creates new scope  adds new div element with new input  that is why the input field loses focus - old div with old input is replaced by new div with new input   new values for new DOM elements are rendered    Also  you can try to use AngularJS Batarang and see how changes  id of the scope of div with input in which you enter

[angularjs] Difficulty with ng-model, ng-repeat, and inputs

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to angularjs-ng-model