Is there a way to show previously selected option in a dropdown

Question

I have a <select> element in my html page. The <option>s are given through a loop. The selected value is stored using a ng-model. This data is now push to a database. The next time that page reloads I would like the the <select> field to hold the previously selected option. Is there anyway to do it?

I have seen that ng-model generally fills text fields on it own. I tried to do the same with <select>-<option> but it doesn't work

<select ng-model="option">
  <option value = "" disabled selected>---Choose an Option--</option> 
  <option ng-repeat = "x in option" value="x">{{x}}</option>
</select>

AS you said the selected data is pushed to the database then you need to retrieve the data from the db when you do a reload a initialise your ng-model variable with that — crystalthinker, May 20 '19 at 06:00
you need to use a service/data store for this, where you can store a value and get it back on page-refresh — jcuypers, May 20 '19 at 06:02
I am able to get the value. My problem is not being able to display the previously selected value — Harish Prabhu, May 20 '19 at 06:08
@HarishPrabhu Up to when you want to store the previously selected value? i.e Save for 2 hrs, Save for 2 days? etc — Prashant Pimpale, May 20 '19 at 06:14
The option selected is to be stored forever. The page can be accessed many times. So every time the page is visited, I want to show the selected value instead of the user having to re-select every time they visit — Harish Prabhu, May 20 '19 at 06:18
You could use sessionStorage for a case like this (or local storage if you want it to be more persistent). Something like this: https://stackblitz.com/edit/angular-vprkkh — Jojofoulk, May 20 '19 at 06:19
I am using angualrjs, as far as I know I don't think it supports typescript. Am I wrong? @Jojofoulk — Harish Prabhu, May 20 '19 at 06:24
@HarishPrabhu See [this](https://stackoverflow.com/questions/18247130/how-do-i-store-data-in-local-storage-using-angularjs) — Prashant Pimpale, May 20 '19 at 06:25
Thank you guys for all the effort. I had made an error else where. I am so sorry I did respond earlier — Harish Prabhu, May 21 '19 at 12:50

georgeawg · Accepted Answer · 2019-05-20T11:40:39.567

When selecting from an array of primitives, use the ng-options directive:

angular.module("app",[])
.controller("ctrl", function($scope) {
    $scope.options=["hello","world",1,2,3];

    //set previously selected option
    $scope.option = "world";
    
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    <select ng-model="option" ng-options="item for item in options">
         <option value = "">---Choose an Option--</option> 
    </select>
    <br>selected={{option}}
<body>

One can select using ng-repeat with an array of objects, but not with an array of primitives. Under the hood, the <select> directive annotates each option with tracking information. It can't annotate primitives.

For more information, see

AngularJS <select> Directive API Reference - Choosing between ng-repeat and ng-options

Thank You man. I had made a error in the flow of my program which caused the error. I am so sorry that I hadn't responded earlier. Appreciate the effort — Harish Prabhu, May 21 '19 at 12:48

Is there a way to show previously selected option in a dropdown

1 Answers1