Search code examples
javascriptangularjsdrop-down-menuangularjs-scopelocal-storage

Assign local storage value to $scope

I'm trying to assign local storage value to $scope variable and use that $scope variable in ng-model to initialize dropdowns. im trying the below code and it is not working.

Here is the plunker: https://plnkr.co/edit/Ile7ehzxB9PcoeTKk1B6?p=preview

I need to initialize it from local storage only, as im receiving data only through local storage.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    var app = angular.module('appNew', []);
    app.controller('controllerNew', function($scope) {
      $scope.dataSet = ["A", "B", "C"];
      localStorage['color'] = {"A":"Red","B":"Red","C":"Blue"};
      var colorVar = localStorage['color'] || '';
      $scope.selectColor = colorVar;
    });
  </script>
</head>

<body ng-app="appNew">
  <table class="table TableOne" ng-controller="controllerNew">
    <thead>
      <tr>
        <th>Serial</th>
        <th>Data</th>
        <th>Dropdown</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in dataSet">
        <td>{{$index + 1}}</td>
        <td>{{data}}</td>
        <td>
          <select ng-model="$parent.selectColor[data]">
            <option value="">-- Select --</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>
Solution

  • LocalStorage allows storage of key/value pairs as of now - see the doc here:

    The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

    So you can stringify the object for storing and parse them for getting it back from localstorage like this:

      localStorage['color'] = JSON.stringify({"A": "Red","B": "Red","C": "Blue"});
  $scope.selectColor = JSON.parse(localStorage['color']);

    See snippet below - snippet may not work due to restrictions - so check out the plnkr code here.

    var app = angular.module('appNew', []);
app.controller('controllerNew', function($scope) {
  $scope.dataSet = ["A", "B", "C"];
  
  localStorage['color'] = JSON.stringify({"A": "Red","B": "Red","C": "Blue"});
  $scope.selectColor = JSON.parse(localStorage['color']);
});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="appNew">
  <table class="table TableOne" ng-controller="controllerNew">
    <thead>
      <tr>
        <th>Serial</th>
        <th>Data</th>
        <th>Dropdown</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in dataSet">
        <td>{{$index + 1}}</td>
        <td>{{data}}</td>
        <td>
          <select ng-model="selectColor[data]">
            <option value="">-- Select --</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>