Deepak Desai Deepak Desai - 13 days ago 5
AngularJS Question

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>

Answer

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>