Within my Angular application, I keep crucial victim data in local storage. This data is then showcased in the view where it can be altered (via a <select>):
<h1>Victim #{{victim.numero}}</h1>
<label>Victim status</label>
<select ng-model="victim.status" ng-options="s.libelle for s in status"></select>
<label>Victim situation</label>
<select ng-model="victim.situation" ng-options="s for s in situations"></select>
An issue arises when attempting to display the value stored in victim.status by default upon refreshing the page (the value is not null). Interestingly, this problem does not occur with victim.numero or victim.situation.
Using the provided Fiddle, here's a scenario that illustrates the bug:
- Open the Fiddle
- The status input will be empty, despite having a defined variable bound
- Make a change, click "Save changes": the input displays correctly
- Press F5: The variable updates correctly in local storage, but remains invisible in the input
- Note that the situation input continues to function properly
The key distinction between victim.status and victim.situation lies in the fact that status is an object while situation is a string.
I've created a simplified code snippet to replicate the issue:
JSFiddle demonstration
My aim is to have the status input automatically populated with victim.status upon page load, how can I address this?
Appreciate any guidance!