getting the ng-object selected with ng-change

Question

Given the following select element   lt select ng-options  size code as size name for size in sizes            ng-model  item size code           ng-change  update MAGIC THING   gt   lt  select gt    Is there a way to get MAGIC THING to be equal to the currently selected size  so I have access to size name and size code in my controller   size code affects a lot of the other parts of the app  image urls  etc   but when the ng-model of item size code is updated  item size name needs to be updated as well for the user facing stuff  I assume that the correct way to do this is capturing the change event and setting the values inside of my controller  but I m not sure what I can pass into update to get the proper values   If this is completely the wrong way to go about it  I d love to know the right way

User · Answer

you also coud try this   lt select  ng-model  quot selectedItem quot  ng-change  quot update   quot  gt      lt option ng-repeat  quot item in items quot            ng-selected  quot selectedItem    item Id quot  value  quot   item Id   quot  gt          item Name       lt  option gt   lt  select gt

User · Answer

Instead of setting the ng-model to item size code  how about setting it to size    lt select ng-options  size as size name for size in sizes      ng-model  item  ng-change  update    gt  lt  select gt    Then in your update   method   scope item will be set to the currently selected item   And whatever code needed item size code  can get that property via  scope item code   Fiddle   Update based on more info in comments   Use some other  scope property for your select ng-model then    lt select ng-options  size as size name for size in sizes      ng-model  selectedItem  ng-change  update    gt  lt  select gt    Controller    scope update   function         scope item size code    scope selectedItem code       use  scope selectedItem code and  scope selectedItem name here       for other stuff

User · Answer

x000D   x000D    Javascript x000D   scope update   function      x000D       scope myItem  x000D      alert  Hello    x000D    x000D   lt  --HTML-- gt  x000D   lt div class  form-group  gt  x000D        lt select name  name  x000D               id  id   x000D               ng-model  myItem   x000D               ng-options  size as size name for size in sizes  x000D               class  form-control   x000D               ng-change  update    x000D               multiple x000D               required gt  x000D        lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    If you want to write  name  id  class  multiple  required   You can write in this way

User · Answer

You can also directly get selected value using following code    lt select ng-options  t name for t in templates                    ng-change  selectedTemplate t url   gt  lt  select gt    script js    scope selectedTemplate   function pTemplate          Your logic     alert  Template Url is     pTemplate

User · Answer

AngularJS s Filter worked out for me   Assuming the code id is unique  we can filter out that particular object with AngularJS s filter and work with the selected objects properties  Considering the example above    lt select ng-options  size code as size name for size in sizes           ng-model  item size code           ng-change  update MAGIC THING   search code   item size code  gt   lt  select gt    lt  -- OUTSIDE THE SELECT BOX -- gt    lt h1 ng-repeat  size in sizes   filter search true      ng-init  search code   item size code  gt      size name    lt  h1 gt    Now  there are 3 important aspects to this    ng-init  search code   item size code  - on initializing h1 element outside select box  set the filter query to the selected option  ng-change  update MAGIC THING   search code   item size code  - when you change the select input  we ll run one more line which will set the  search  query to the currently selected item size code  filter search true - Pass true to filter to enable strict matching    That s it   If the size code is uniqueID  we ll have only one h1 element with the text of size name   I ve tested this in my project and it works   Good Luck

User · Answer

This might give you some ideas     NET C  View Model   public class DepartmentViewModel       public int Id   get  set        public string Name   get  set         NET C  Web Api Controller  public class DepartmentController   BaseApiController        HttpGet      public HttpResponseMessage Get                 var sms   Ctx Departments           var vms   new List lt DepartmentViewModel gt              foreach  var sm in sms                        var vm   new DepartmentViewModel                                 Id   sm Id                  Name   sm DepartmentName                            vms Add vm                      return Request CreateResponse HttpStatusCode OK  vms              Angular Controller    http get   api department   then      function  response             scope departments   response data             function  response            toaster pop  error    Error    An unexpected error occurred                http get   api getTravelerInformation     params    id   routeParams userKey      then     function  response            scope request   response data          scope travelerDepartment   underscoreService findWhere  scope departments    Id   scope request TravelerDepartmentId               function  response            toaster pop  error    Error    An unexpected error occurred                Angular Template    lt div class  form-group  gt       lt label gt Department lt  label gt       lt div class  left-inner-addon  gt           lt i class  glyphicon glyphicon-hand-up  gt  lt  i gt           lt select ng-model  travelerDepartment                  ng-options  department Name for department in departments track by department Id                  ng-init  request TravelerDepartmentId   travelerDepartment Id                  ng-change  request TravelerDepartmentId   travelerDepartment Id                  class  form-control  gt               lt option value    gt  lt  option gt           lt  select gt       lt  div gt   lt  div gt

User · Answer

lt select ng-model  item size code  gt   lt option ng-repeat  size in sizes  ng-attr-value  size code  gt   size name             lt  option gt   lt  select gt

User · Answer

You need to use  track by  so that the objects can be compared correctly  Otherwise Angular will use the native js way of comparing objects   So your example code would change to -       lt select ng-options  size code as size name  for size in sizes track by size code   ng-model  item size code  gt  lt  select gt

User · Answer

This is the cleanest way to get a value from an angular select options list  other than The Id or Text   Assuming you have a Product Select like this on your page     lt select ng-model  data ProductId          ng-options  product Id as product Name for product in productsList          ng-change  onSelectChange    gt   lt  select gt    Then in Your Controller set the callback function like so        scope onSelectChange   function              var filteredData    scope productsList filter function  response                return response Id      scope data ProductId                     console log filteredData 0  ProductColor           Simply Explained  Since the ng-change event does not recognize the option items in the select  we are using the ngModel to filter out the selected Item from the options list loaded in the controller   Furthermore  since the event is fired before the ngModel is really updated  you might get undesirable results  So a better way would be to add a timeout             scope onSelectChange   function                   timeout function                  var filteredData    scope productsList filter function  response                    return response Id      scope data ProductId                             console log filteredData 0  ProductColor                  100

User · Answer

If Divyesh Rupawala s answer doesn t work  passing the current item as the parameter   then please see the onChanged   function in this Plunker   It s using this   http   plnkr co edit B5TDQJ

[angularjs] getting the ng-object selected with ng-change

Examples related to angularjs