AngularJS ng-options get selected item as an object

facot picture facot · Sep 22, 2014 · Viewed 14.5k times · Source

I have an object array in my scope and I list them in a dropdown control like below.

 <select ng-model="selectedItem" ng-options="product.ID as product.Name for product in products">
     <option value="">Please select a product...</option>
 </select>

I also want to get the selectedItem as an object to reach other attributes of the object so I can manupulate the content in my page. For example;

<a ng-show="selectedItem.isAvailable">Buy Now!</a>

Can anyone help me with this? Thank you.

Answer

PSL picture PSL · Sep 22, 2014

You just need to remove select as part from the ng-options, so that the selected product will be the ngModel, selectedItem.

Try:-

 <select ng-model="selectedItem" ng-options="product.Name for product in products track by product.id">
     <option value="">Please select a product...</option>
 </select>

Your current syntax is select as label for value in array where select is the product.ID, so you would just change it to label for value in array