0

I am trying to figure out if there is a way such that I display certain options on a dropdown, but on select, the display label is different. Below is a basic scenario I am trying to solve.

$scope.availableOptions = [
    {optionNm: "Gabrial: 20/05/2007", selectedNm: "Gabriel"},
    {optionNm: "Jake: 22/10/2007", selectedNm: "Jake"},
    {optionNm: "Abby: 20/06/2007", selectedNm: "Abby"},
]
$scope.selectedOption = ''

And my html snippet is:

<select
   ng-model="selectedOption"
   ng-options="opt.optionNm for opt in availableOptions track by opt.optionNm">
 </select>

Right now by select box will display Gabrial: 20/05/2007 but I want to display Gabriel

UPDATE

To be clear, I want my options to display e.g. Gabriel: 20/05/2007, but once I select it, I want the display box to just display Gabriel

fa72
  • 1
  • 2
  • Check out this link, it explains this very well: https://stackoverflow.com/questions/12139152/how-do-i-set-the-value-property-in-angularjs-ng-options – Steven Senkus May 21 '20 at 19:38
  • Thanks for like link Steven, unfortunately I want the option values to remain format, but once I select an option, I want it to only display (the select input box) just the name. – fa72 May 21 '20 at 20:04
  • In that case, you should create a custom directive that will basically wrap the ` – Steven Senkus May 21 '20 at 20:20

0 Answers0