Retain the dropdown value after the page is refresh or move to another page in angularjs

Question

let me explain my scenario. I am having the dropdownlist in my master page. if changed dropdownlist the data are changed depend upon the dropdownlist value.
If i refreshed my page or moved to another page the dropdownlist will clear automatically.

I want to retain the dropdownlist value after refresh the page or moved to another page.

I tried like this but this is not help ful.

HTML

<select id="Facility_ID" required typeof="text" name="Facility Name" ng-options="Role.FacilityName for Role in Roles"
                    form="DistanceMatrixFormId" class="form-control" ng-model="Role._id" ng-selected="getFacilityID(Role._id.FacilityName)">
            </select>

Controller.js

 $scope.getFacilityID = function (data) {
     localStorage.setItem("FacilityName", data);
     var getfacility = localStorage.getItem("FacilityName");
 }

i refered this link but it is not help ful

I don't know how to retain the value. can any one fixed me.

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

You cannot put an object into the local storage, you must store strings inside local storage.

If you want, you can have an implementation I did here : How to add local storage in angular?

For your current code, you don't need to use ng-selected. ng-model is enough.

<select id="Facility_ID" required typeof="text" 
        name="Facility Name" 
        ng-options="Role.FacilityName for Role in Roles"
        form="DistanceMatrixFormId" 
        class="form-control" 
        ng-model="Role._id"
        ng-change="updateLocalStorage()">
</select>

And inside your angular controller, what you can do is the following :

myApp.controller('controllerName', ['$scope', 'LocalStorageService',
     function($scope, LocalStorageService){

     // After initialization of your "Role" object

     $scope.Role._id = LocalStorageService.retrieve('mySelectValue');

     $scope.updateLocalStorage = function(){
         LocalStorageService.store('mySelectValue', $scope.Role._id);
     }

}])

edited May 23 '17 at 12:10

Community

1
1

answered Apr 26 '17 at 10:21

Deblaton Jean-Philippe

11,188
3
49
66

Hi Deblaton Jean-philippe: I got this error [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=LocalStorageServiceProvider%20%3C-%20LocalStorageService%20%3C-%20UserNameShowCtrl – Vinoth Apr 26 '17 at 10:28
Do i have to add any js for localstorageservice in my proj – Vinoth Apr 26 '17 at 10:40
@Vinoth Then `JSON.stringify` them – Tamas Hegedus Apr 26 '17 at 11:13
@Vinoth In my answer I provided you a link to a LocalStorageService I wrote 2 years ago. My answer here illustrate how to use it in your case. So yes, you need to create a service like I did in the answer I linked – Deblaton Jean-Philippe Apr 26 '17 at 11:49
@DeblatonJean-Philippe: not open anything in my UI. I got error in my controller.js page. _id is undefined. – Vinoth Apr 27 '17 at 10:35
@Vinoth I need more information. At what line is the '_id' undefined? Maybe you can do `LocalStorageService.store('mySelectValue', $scope.Role._id || '');` – Deblaton Jean-Philippe Apr 27 '17 at 13:52

score -1 · Answer 2 · answered Apr 26 '17 at 12:02

Here is an example that uses a service to store the selected value. Unfortunately the embedded demo does not work because of the sandboxing, but works when served as an application.

angular.module(
  "App", []
).factory("MyStorage", function() {
  const key = "selected";
  return {
    getValue: function() {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : null;
    },
    setValue: function(value) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  };
}).controller("MyCtrl", function($scope, MyStorage) {
  $scope.options = ["A", "B", "C"];
  $scope.selected = MyStorage.getValue();
  $scope.$watch("selected", newValue => {
    MyStorage.setValue(newValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="App" ng-controller="MyCtrl">
  <select ng-model="selected" ng-options="x for x in options">
  </select>
</div>

Retain the dropdown value after the page is refresh or move to another page in angularjs

2 Answers2

Linked