MarcoS MarcoS - 4 months ago 10
Javascript Question

Angular: how to set 'value' different than displayed value in options?

In my angular SPA I am using a

<select><option ng-repeat...></select>
construct, this way

<div ng-init="hours = [ '9:00', '10:00' ]">
<select name="eta" ng-model="reservation.eta">
<option ng-repeat="hour in hours track by $index" ng-value="hour">{{ 'We arrive at' | translate }} {{hour}}</option>
</select>
</div>


The problem is that in the
value
of each
option
I get "We arrive at HOUR" string (the same as in the displayed value, which is correct), and not the hour alone, as I want...

What do I miss?

N.B.: Please do not suggest using
ng-options
since I was forced to drop it for some problem setting the selected and disabled first option (as a placeholder)... :-(

Answer

You don't need to use ng-value here. Just use value.

<div ng-init="hours = [ '9:00', '10:00' ]">
   <select name="eta" ng-model="reservation.eta">
      <option ng-repeat="hour in hours track by $index" value="{{hour}}">{{ 'We arrive at' | translate }} {{hour}}</option>
   </select>
</div>