Get value when selected ng-option changes

Question

I have in my  html page a dropdown list   Dropdown    lt select ng-model  blisterPackTemplateSelected  data-ng-options  blisterPackTemplate as blisterPackTemplate name for blisterPackTemplate in blisterPackTemplates  gt       lt option value    gt Select Account lt  option gt   lt  select gt    I want to execute an action when the user select a value  So In my controller I did    Controller    scope  watch  blisterPackTemplateSelected   function         alert  changed        console log  scope blisterPackTemplateSelected         But the changing the value in the dropdownlist doesn t trigger the code    scope  watch  blisterPackTemplateSelected   function    As a result I tried another method with a   ng change    changedValue    on the select tag  and   Function    scope changedValue   function        console log  scope blisterPackTemplateSelected       But the blisterPackTemplateSelected is stored into a child scope  I read that the parent can t get access to the child scope   What is the correct best way to execute something when a selected value in a dropdown list changes  If it s method 1  what am I doing wrong with my code

User · Answer

You can do something like this   lt html ng-app  App   gt   lt script src  http   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt    lt script gt  angular module  App         controller  ctrl     scope  function  scope         scope changedValue   function item              alert item               lt  script gt   lt div  gt   lt div ng-controller  ctrl  gt       lt select  ng-model  blisterPackTemplateSelected  ng-change  changedValue blisterPackTemplateSelected    gt       lt option value    gt Select Account lt  option gt       lt option value  Add  gt Add lt  option gt   lt  select gt   lt  div gt   lt  div gt   lt  html gt    instead of add option you should use data-ng-options I have used Add option for testing purpose

User · Answer

as Artyom said you need to use ngChange and pass  ngModel object as argument to your ngChange function  Example    lt div ng-app  App   gt     lt div ng-controller  ctrl  gt       lt select ng-model  blisterPackTemplateSelected  ng-change  changedValue blisterPackTemplateSelected                data-ng-options  blisterPackTemplate as blisterPackTemplate name for blisterPackTemplate in blisterPackTemplates  gt         lt option value    gt Select Account lt  option gt       lt  select gt        itemList           lt  div gt          lt  div gt    js   function ctrl  scope       scope itemList          scope blisterPackTemplates     id 1 name  a    id 2 name  b    id 3 name  c         scope changedValue   function item         scope itemList push item name                  Live example  http   jsfiddle net choroshin 9w5XT 4

User · Answer

You will get selected option s value and text from list array by using filter   editobj FlagName  EmployeeStatus filter  Value editobj Flag   0  KeyName   lt select name  statusSelect        id  statusSelect        class  form-control        ng-model  editobj Flag        ng-options  option Value as option KeyName for option in EmployeeStatus        ng-change  editobj FlagName  EmployeeStatus filter  Value editobj Flag   0  KeyName  gt   lt  select gt

User · Answer

I am late here but I resolved same kind of problem in this way that is simple and easy    lt select ng-model  blisterPackTemplateSelected  ng-change  selectedBlisterPack blisterPackTemplateSelected   gt   lt option value    gt Select Account lt  option gt   lt option ng-repeat  blisterPacks in blisterPackTemplates  value    blisterPacks id    gt   blisterPacks name   lt  option gt      and the function for ng-change is as follows     scope selectedBlisterPack  function  value               console log  scope blisterPackTemplateSelected

User · Answer

You can pass the ng-model value through the ng-change function as a parameter    lt select    ng-model  blisterPackTemplateSelected     data-ng-options  blisterPackTemplate as blisterPackTemplate name for blisterPackTemplate in blisterPackTemplates     ng-change  changedValue blisterPackTemplateSelected   gt       lt option value    gt Select Account lt  option gt   lt  select gt    It s a bit difficult to know your scenario without seeing it  but this should work

User · Answer

Best practise is to create an object  always use a   in ng-model   In your controller   var myObj         ngModelValue  null      and in your template    lt select      ng-model  myObj ngModelValue       ng-options  o id as o name for o in options  gt   lt  select gt    Now you can just watch  myObj ngModelValue   or you can use the ng-change directive like so    lt select      ng-model  myObj ngModelValue       ng-options  o id as o name for o in options      ng-change  myChangeCallback    gt   lt  select gt    The egghead io video  The Dot  has a really good overview  as does this very popular stack overflow question  What are the nuances of scope prototypal   prototypical inheritance in AngularJS

User · Answer

I may be late for this but I had somewhat the same problem   I needed to pass both the id and the name into my model but all the orthodox solutions had me make code on the controller to handle the change    I macgyvered my way out of it using a filter    lt select          ng-model  selected id           ng-options  o id as o name for o in options           ng-change  selected name  options filter  id selected id   0  name  gt   lt  select gt   lt script gt    angular module  app         controller  ctrl     scope  function  scope        scope options            id 1  name  Starbuck           id 2  name  Appolo           id 3  name  Saul Tigh           id 4  name  Adama                lt  script gt    The  trick  is here   ng-change  selected name  options filter  id selected id   0  name    I m using the built-in filter to retrieve the correct name for the id  Here s a plunkr with a working demo

User · Answer

Please  use for it ngChange directive  For example    lt select ng-model  blisterPackTemplateSelected           ng-options  blisterPackTemplate as blisterPackTemplate name for blisterPackTemplate in blisterPackTemplates           ng-change  changeValue blisterPackTemplateSelected    gt    And pass your new model value in controller as a parameter   ng-change  changeValue blisterPackTemplateSelected

User · Answer

I had the same issue and found a unique solution  This is not best practice  but it may prove simple helpful for someone  Just use jquery on the id or class or your select tag and you then have access to both the text and the value in the change function  In my case I m passing in option values via sails ejs        lt select id  projectSelector  class  form-control  ng-model  ticket project id  ng-change  projectChange ticket   gt         lt     each projects  function project      gt           lt option value   lt    project id   gt   gt  lt    project title   gt  lt  option gt           lt        gt       lt  select gt    Then in my Angular controller my ng-change function looks like this        scope projectChange   function  scope              scope project title     projectSelector option selected   text

User · Answer

I have tried some solutions but here is basic production snippet  Please  pay attention to console output during quality assurance of this snippet   Mark Up     lt  DOCTYPE html gt   lt html ng-app  appUp  gt   lt head gt   lt title gt    Angular Select snippet  lt  title gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css    gt    lt  head gt     lt body ng-controller  upController  gt    lt div  class  container  gt     lt div class  row  gt    lt div class  col-md-4  gt     lt  div gt     lt div class  col-md-3  gt       lt div class  form-group  gt       lt select name  slct  id  slct  class  form-control  ng-model  selBrand  ng-change  Changer selBrand   ng-options  brand as brand name for brand in stock  gt       lt option value    gt          Select Brand      lt  option gt       lt  select gt       lt  div gt        lt div class  form-group  gt       lt input type  hidden  name  delimiter  value     ng-model  delimiter    gt       lt input type  hidden  name  currency  value     ng-model  currency    gt       lt span gt         selBrand name    delimiter    selBrand price    currency        lt  span gt       lt  div gt     lt  div gt     lt div class  col-md-4  gt     lt  div gt    lt  div gt   lt  div gt    lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt   lt  script gt   lt script type  text javascript  src    cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  gt  lt  script gt   lt script src    maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt   lt script type  text javascript  src    ajax googleapis com ajax libs angularjs 1 5 7 angular min js  gt   lt  script gt   lt script src  js ui-bootstrap-tpls-2 5 0 min js  gt  lt  script gt   lt script src  js main js  gt  lt  script gt   lt  body gt    lt  html gt    Code   var c   console   var d   document     var app   angular module  appUp      controller  upController  function  scope         scope stock           name  Adidas        price 420                         name  Nike        price 327                         name  Clark        price 725                     data          scope Changer   function         if  scope selBrand         c log  brand    scope selBrand name   price    scope selBrand price         scope currency              scope delimiter                    else            scope currency                scope delimiter               c clear                     onchange handler         Explanation   important point here is null check of the changed  value  i e  if value is  undefined  or  null  we should to handle this situation

[angularjs] Get value when selected ng-option changes

Examples related to angularjs

Examples related to angularjs-scope