HTML select input losing its value when switching between views with ui-router

Question

I have a single controller with multiple views which are navigated with ui-router.

One of these views has a select input. The options for this select are loaded from array with simple objects. My model value is integer, so I want to bind to a property inside the object (as we know, Angular treats option values as strings and does strict comparison, so I need a directive to convert to/from integer, and this part seems to work fine in my code). It works fine, as long as I stay on the view with select. But the problems start when I switch between views. Although the model preserves its value, the select gets reset and shows wrong value.

How to make select survive ui-router's navigation?

Here is a Plunker to show the issue: http://embed.plnkr.co/dVQTtHpu7GYqOyN2yyVH/preview

@JustMartin Every time controller get initialized when you navigate to page back. Which mean you should keep selected option value in service. — Mohan Singh
– Mohan Singh, Commented Aug 18, 2015 at 13:36
@Mohan Singh: My case is a bit non-standard - I don't specify controller for the state. My ng-controller is outside - the same controller instance for both views - and even its constructor is called only once and not while navigating. If controller would get reinitialized, then the model value also would be lost, but it is not - it stays and is displayed correctly when I switch between views. Only select value is being displayed wrong. — JustAMartin
– JustAMartin, Commented Aug 18, 2015 at 13:40
@Mohan Singh Because as much as I tried, it was loading entire selected object into my model, and not just the id property. But it seems, I was not clever enough - see the accepted answer. — JustAMartin
– JustAMartin, Commented Aug 18, 2015 at 13:58

Ronan Quillevere · Accepted Answer · 2015-08-18 13:45:46Z

4

<select ng-model="cntrlr.model.lang_id" ng-options="idx*1 as var.name for (idx, var) in cntrlr.languages">
        </select>

http://embed.plnkr.co/lBmsDLUXJjfIf2Tc08UI/preview

answered Aug 18, 2015 at 13:45

Ronan Quillevere

3,9191 gold badge33 silver badges45 bronze badges

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

3 Comments

JustAMartin Over a year ago

Thanks, this works. What a smart use of ng-options, I would never think of such a trick.

Ronan Quillevere Over a year ago

Actually I found it myself in some question in stack-overflow one day but could not find the original answer it was from. Sorry so credits is not 100% from me

JustAMartin Over a year ago

There is just one drawback I found - it works fine as long as "id" fields are in the same sequence as idx, but if they are not, then still I cannot bind directly to model.lang_id but have to use some intermediate model value which then selects the right record by index from languages.

Collectives™ on Stack Overflow

HTML select input losing its value when switching between views with ui-router

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