ng-change not working on a text input

Question

I am new to angular js  In my code there is color picker initialized from a text field  User changes the value of color and I want that color to be reflected as a background of a text in a span  It is not working  What is missing   HTML    lt body ng-app    gt      lt input type  button  value  set color  ng-click  myStyle  color  red    gt      lt input type  button  value  clear  ng-click  myStyle     gt      lt input type  text  name  abc  class  color  ng-change  myStyle  color  green    gt      lt br  gt      lt span ng-style  myStyle  gt Sample Text lt  span gt      lt pre gt myStyle   myStyle   lt  pre gt   lt  body gt    Plunker - http   plnkr co edit APrl9Y98Em0d6rxuzRDE p preview  However when I change it to ng-click it works

User · Accepted Answer

ng-change requires ng-model     lt input type  text  name  abc  class  color  ng-model  someName  ng-change  myStyle  color  green    gt

User · Answer

One can also bind a function with ng-change event listener  if they need to run a bit more complex logic    lt div ng-app  myApp  ng-controller  myCtrl  gt                 lt input type  text  ng-model  name  ng-change  change    gt           lt br  gt   lt span gt changed   counter   times  lt  span gt    lt  div gt         var app   angular module  myApp        app controller  myCtrl   function  scope           scope name    Australia          scope counter   0         scope change   function              scope counter                   https   jsfiddle net as0nyre3 1

User · Answer

When you want to edit something in Angular you need to insert an ngModel in your html  try this in your sample        lt input type  text  name  abc  class  color  ng-model  myStyle color  gt    You don t need to watch the change at all

User · Answer

First at all i m seing your code and you haven t any controller  So i suggest that you use a controller  I think you have to use a controller because your variable   myStyle   isn t compile because the 2 curly brace are visible and they shouldn t   Second you have to use ng-model for your input  this directive will bind the value of the input to your variable

User · Answer

Maybe you can try something like this   Using a directive  directive  watchChange   function         return           scope                onchange    amp watchChange                     link  function scope  element  attrs                element on  input   function                     scope onchange                                           http   jsfiddle net H2EAB

User · Answer

I ve got the same issue  my model is binding from another form  I ve added ng-change and ng-model and it still doesn t work    lt input type  hidden  id  pdf-url  class  form-control  ng-model  pdfUrl   gt    lt ng-dropzone   dropzone  dropzone    dropzone-config  dropzoneButtonCfg    model  pdfUrl  gt   lt  ng-dropzone gt    An input  pdf-url gets data from dropzone  two ways binding   however  ng-change doesn t work in this case   scope  watch is a solution for me    scope  watch  pdfUrl   function updatePdfUrl newPdfUrl  oldPdfUrl      if  newPdfUrl     oldPdfUrl           It s updated - Do something you want here            Hope this help

[angularjs] ng-change not working on a text input

Examples related to angularjs

Examples related to colors

Examples related to angularjs-directive

Examples related to angularjs-ng-change