Ng-model does not update controller value

Question

Probably silly question  but I have my html form with simple input and button    lt input type  text  ng-model  searchText    gt   lt button ng-click  check    gt Check  lt  button gt     searchText      Then in the controller  template and controller are called from routeProvider     scope check   function          console log  scope searchText       Why do I see the view updated correctly but undefined in the console when clicking the button   Thanks   Update  Seems like I have actually solved that issue  before had to come up with some workarounds  with  Only had to change my property name from searchText to search text  then define empty  scope search       object in the controller and voila    Have no idea why it s working though

User · Answer

I came across the same issue when dealing with a non-trivial view  there are nested scopes   And finally discovered this is a known tricky thing when developing AngularJS application due to the nature of prototype-based inheritance of java-script  AngularJS nested scopes are created through this mechanism  And value created from ng-model is placed in children scope  not saying parent scope  maybe the one injected into controller  won t see the value  the value will also shadow any property with same name defined in parent scope if not use dot to enforce a prototype reference access  For more details  checkout the online video specific to illustrate this issue  http   egghead io video angularjs-the-dot  and comments following up it

User · Answer

Using this instead of  scope works   x000D   x000D  function AppCtrl  scope   x000D     scope searchText       x000D     scope check   function      x000D      console log  You typed      this searchText            used  this  instead of  scope x000D      x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app gt  x000D     lt div ng-controller  AppCtrl  gt  x000D       lt input ng-model  searchText   gt  x000D       lt button ng-click  check    gt Write console log lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Edit  At the time writing this answer  I had much more complicated situation than this  After the comments  I tried to reproduce it to understand why it works  but no luck  I think somehow  don t really know why  a new child scope is generated and this refers to that scope  But if  scope is used  it actually refers to the parent  scope because of javascript s lexical scope feature   Would be great if someone having this problem tests this way and inform us

User · Answer

Have a look at this fiddle http   jsfiddle net ganarajpr MSjqL   I have   I assume    done exactly what you were doing and it seems to be working  Can you check what is not working here for you

User · Answer

For me the problem was solved by stocking my datas into an object  here  datas      x000D   x000D  NgApp controller  MyController   function  scope    x000D   x000D      scope my title          This don t work in ng-click function called x000D   x000D      scope datas     x000D         my title        x000D        x000D   x000D      scope doAction   function     x000D           console log  scope my title      bad value x000D           console log  scope datas my title      Good Value binded by ng-model  x000D       x000D      x000D   x000D      x000D   x000D   x000D    I Hop it will help

User · Answer

I was facing same problem    The resolution that worked for me is to use this keyword            alert this ModelName

User · Answer

Since no one mentioned this the problem can be resolved by adding  parent to the bound property   lt div ng-controller  LoginController  gt       lt input type  text  name  login  class  form-control  ng-model   parent ssn  ng-pattern    d 6 8 - d 4   d 10 12    ng-required  true    gt       lt button class  button-big  type  submit  ng-click  BankLogin    ng-disabled   bankidForm login  valid  gt Logga in lt  button gt   lt  div gt    And the controller  app controller  LoginController      scope   function   scope         scope ssn             scope BankLogin   function              console log  scope ssn      works

User · Answer

I had the same problem and it was due to me not declaring the blank object first at the top of my controller    scope model        lt input ng-model  model firstProperty  gt    Hope this will works for you

User · Answer

quot If you use ng-model  you have to have a dot in there  quot   Make your model point to an object property and you ll be good to go  Controller  scope formData        scope check   function        console log  scope formData searchText  modelValue     works    Template  lt input ng-model  quot formData searchText quot   gt   lt button ng-click  quot check   quot  gt Check  lt  button gt   This happens when child scopes are in play - like child routes or ng-repeats  The child-scope creates it s own value and a name conflict is born as illustrated here  See this video clip for more  https   www youtube com watch v SBwoFkRjZvE amp t 3m15s

User · Answer

Controller as version  recommended   Here the template   lt div ng-app  example  ng-controller  myController as  ctrl  gt       lt input type  text  ng-model   ctrl searchText    gt       lt button ng-click   ctrl check    gt Check  lt  button gt          ctrl searchText     lt  div gt    The JS  angular module  example          controller  myController   function         var vm   this      vm check   function            console log vm searchText                  An example  http   codepen io Damax pen rjawoO  The best will be to use component with Angular 2 x or Angular 1 5 or upper            Old way  NOT recommended   This is NOT recommended because a string is a primitive  highly recommended to use an object instead   Try this in your markup   lt input type  text  ng-model  searchText    gt   lt button ng-click  check searchText   gt Check  lt  button gt     searchText      and this in your controller   scope check   function  searchText        console log searchText

User · Answer

In Mastering Web Application Development with AngularJS book p 19  it is written that      Avoid direct bindings to scope s properties  Two-way data binding to   object s properties  exposed on a scope  is a preferred approach  As a   rule of thumb  you should have a dot in an expression provided to the   ng-model directive  for example  ng-model  thing name      Scopes are just JavaScript objects  and they mimic dom hierarchy  According to JavaScript Prototype Inheritance  scopes properties are separated through scopes  To avoid this  dot notation should use to bind ng-models

User · Answer

I just had this very issue using a root controller bound to the body-element  Then I was using ng-view with the angular router  The problem is that angular ALWAYS creates a new scope when it inserts the html into ng-view element  As a consequence  my  check  function was defined on the parent scope of the scope that was modified by my ng-model element   To solve the problem  just use a dedicated controller within route-loaded html content

User · Answer

I had the same problem  The proper way would be setting the  searchText  to be a property inside an object      But what if I want to leave it as it is  a string  well  I tried every single method mentioned here  nothing worked  But then I noticed that the problem is only in the initiation  so I ve just set the value attribute and it worked    lt input type  text  ng-model  searchText  value   searchText     gt    This way the value is just set to   scope searchText  value and it s being updated when the input value changes   I know it s a workaround  but it worked for me

User · Answer

You can do that to enable search in ng-keypress enter for input text and in ng-click for the icon    lt input type  text  ng-model  searchText  ng-keypress  keyEnter this  event     gt   lt button ng-click  check searchText   gt Check  lt  button gt   in the controller  scope search   function  searchText            console log searchText              scope keyEnter   function  serachText  event            var keyCode    event which     event keyCode          if  keyCode     13     KeyCode for Enter key            console log searchText

[javascript] Ng-model does not update controller value

Examples related to javascript

Examples related to angularjs

Examples related to data-binding

Examples related to angular-ngmodel