Select a dynamic item in a list with AngularJS

Question

I have a <select> element with an ng-model=sendTime element to select a time from the list. This list contains only a limited number of standard times, but as a last item it always contains an option for the sendTime in the model:

<select ng-model="sendTime" style="">
    <option value="now">now</option>
    <option value="08:00">08:00</option>
    <option value="17:00">17:00</option>
    <option value="{{sendTime}}">{{sendTime}}</option>
</select>

The last item is just to ensure that a custom time (which is not editable in this view) will appear in the selection box. The problem is that Angular doesn't do this correctly. It adds the final element to the list, but it doesn't select it. It only ever selects one of the default times.

How can I fix this?

joakimbl · Accepted Answer · 2013-05-24 12:19:58Z

1

Change the last option to <option ng-value="sendTime">{{sendTime}}</option>. The behavior will be abit weird though. When you select an other option the value of the last option will change to the selected option. If you don't want this behavior you could do something like this:

<select ng-model="sendTime" style="" ng-init="default=sendTime">
  <option value="now">now</option>
  <option value="08:00">08:00</option>
  <option value="17:00">17:00</option>
  <option ng-value="default">{{default}}</option>
</select>

See: http://plnkr.co/edit/YhEgbDSxkE6nYy0FaRVF?p=preview

edited May 24, 2013 at 12:19

answered May 24, 2013 at 12:10

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joakimbl Over a year ago

Yeah, it's still there, I just added an alternative that didn't have this strange effect. Is this the reason you didn't accept the answer?

edA-qa mort-ora-y Over a year ago

No, I just needed time to test the answer. I didn't notice the strange behaviour.

joakimbl Over a year ago

I've updated my plunker with both examples - notice how #1 changes the last option value whenever you change the select value as opposed to #2 where the last option value stays the same

Collectives™ on Stack Overflow

Select a dynamic item in a list with AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related