CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storagesession-state
PK-1825
PK-1825

Reputation: 1489

How to store button value in localstorage angulajs?

I'm using angularjs with smart table, what I'm doing is, I have added toggle button that expand and collapse table row, after click button once, row will expand , if I reload page, all row will collapsed because of page reload. I want those row should open even after page reload, how i can achieve this?

How i can store Button value in local storage? so after page reload button state remain same?

var myApp = angular.module('myApp', [])
  .filter("groupBy", ["$parse", "$filter", function($parse, $filter) {
    return function(array, groupByField) {
      var result = [];
      var prev_item = null;
      var groupKey = false;
      var filteredData = $filter('orderBy')(array, groupByField);
      for (var i = 0; i < filteredData.length; i++) {
        groupKey = false;
        if (prev_item !== null) {
          if (prev_item[groupByField] !== filteredData[i][groupByField]) {
            groupKey = true;
          }
        } else {
          groupKey = true;
        }
        if (groupKey) {
          filteredData[i]['group_by_key'] = true;
        } else {
          filteredData[i]['group_by_key'] = false;
        }
        result.push(filteredData[i]);
        prev_item = filteredData[i];
      }
      return result;
    }
  }])
  .controller('employeeController', function($scope) {

    var employees = [{
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    }, {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    }, {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    }, {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    }, {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    }, {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    }, {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    }, {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    }, {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    }, {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    }, {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }];
    $scope.employees = employees;

    $scope.IsAllCollapsed = false;
    $scope.collapseAll = function() {
      $scope.IsAllCollapsed = !$scope.IsAllCollapsed;
      $scope.employees.forEach(function(item) {
        item.isCollapsed = $scope.IsAllCollapsed;
      })
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<body ng-app="myApp">
  <div ng-controller="employeeController">
    <div class="container" style="margin-top:40px;">
      <div class="row">
        <div class="col-md-6">
          <button id="btnExpandAll" type="button" ng-click="collapseAll()" class="btn btn-info" style="margin-left: 0px; margin-bottom: 20px; float: left;">
                                        <span ng-show="IsAllCollapsed"><i class="fa fa-compress" aria-hidden="true"></i>&nbsp;Collapse All</span>
                                        <span ng-show="!IsAllCollapsed"><i class="fa fa-expand" aria-hidden="true"></i>&nbsp; Expand by Country</span>
                                    </button>

          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat-start="emp in employees |  groupBy:'Country'" ng-show="emp.group_by_key">
                <td colspan="3" ng-if="emp.isCollapsed" ng-click="emp.isCollapsed = false" style="text-align: center; background-color: #eee"><b><span>{{emp.Country}}</span></b></td>
              </tr>

              <tr>

                <td>{{emp.Name}}</td>
                <td>{{emp.City}}</td>
                <td>{{emp.Country}}</td>
              </tr>
              <tr ng-repeat-end=""></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 51

Answers (2)

I. Ahmed
I. Ahmed

Reputation: 2534

Set the value to local storage by using the following:

localStorage.setItem('buttonInfo', JSON.stringify($scope.IsAllCollapsed));

Then read the value and set $scope.IsAllCollapsed 

$scope.IsAllCollapsed = JSON.parse(localStorage.getItem("buttonInfo"));

Please test it in your local PC environment. For security reason, it will not work on stackoverflow:

The working snippet is here:

var myApp = angular.module('myApp', [])
  .filter("groupBy", ["$parse", "$filter", function($parse, $filter) {
    return function(array, groupByField) {
      var result = [];
      var prev_item = null;
      var groupKey = false;
      var filteredData = $filter('orderBy')(array, groupByField);
      for (var i = 0; i < filteredData.length; i++) {
        groupKey = false;
        if (prev_item !== null) {
          if (prev_item[groupByField] !== filteredData[i][groupByField]) {
            groupKey = true;
          }
        } else {
          groupKey = true;
        }
        if (groupKey) {
          filteredData[i]['group_by_key'] = true;
        } else {
          filteredData[i]['group_by_key'] = false;
        }
        result.push(filteredData[i]);
        prev_item = filteredData[i];
      }
      return result;
    }
  }])
  .controller('employeeController', function($scope, $rootScope) {

    var employees = [{
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    }, {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    }, {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    }, {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    }, {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    }, {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    }, {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    }, {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    }, {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    }, {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    }, {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }];
    $scope.employees = employees;
   
    $scope.IsAllCollapsed = JSON.parse(localStorage.getItem("buttonInfo")) ? JSON.parse(localStorage.getItem("buttonInfo")): false;

    $scope.employees.forEach(function(item) {
        item.isCollapsed = $scope.IsAllCollapsed;
    });

    $scope.collapseAll = function() {

      $scope.IsAllCollapsed = !$scope.IsAllCollapsed;
      localStorage.setItem('buttonInfo', JSON.stringify($scope.IsAllCollapsed));
      $scope.employees.forEach(function(item) {
        item.isCollapsed = $scope.IsAllCollapsed;
      })
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="app.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<body ng-app="myApp">
  <div ng-controller="employeeController">
    <div class="container" style="margin-top:40px;">
      <div class="row">
        <div class="col-md-6">
          <button id="btnExpandAll" type="button" ng-click="collapseAll()" class="btn btn-info" style="margin-left: 0px; margin-bottom: 20px; float: left;">
                                        <span ng-show="IsAllCollapsed"><i class="fa fa-compress" aria-hidden="true"></i>&nbsp;Collapse All</span>
                                        <span ng-show="!IsAllCollapsed"><i class="fa fa-expand" aria-hidden="true"></i>&nbsp; Expand by Country</span>
                                    </button>

          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat-start="emp in employees |  groupBy:'Country'" ng-show="emp.group_by_key">
                <td colspan="3" ng-if="emp.isCollapsed" ng-click="emp.isCollapsed = false" style="text-align: center; background-color: #eee"><b><span>{{emp.Country}}</span></b></td>
              </tr>

              <tr>

                <td>{{emp.Name}}</td>
                <td>{{emp.City}}</td>
                <td>{{emp.Country}}</td>
              </tr>
              <tr ng-repeat-end=""></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

PK-1825
PK-1825

Reputation: 1489

I found solution, I have used ngStorage ngStorage for this

  angular.module('App', ['ngStorage'])
     .controller('employeeController', function ($scope,$localStorage) {
})

OnPageLoad:

$scope.IsAllCollapsed = ($localStorage.IsAllCollapsed == undefined) ? $scope.IsAllCollapsed : $localStorage.IsAllCollapsed;

Global Variable:

$scope.IsAllCollapsed = false;

within Function;

      BindCollapseToData($scope.employees);
                                  $scope.collapseAll = function () {
                                      $scope.IsAllCollapsed = !$scope.IsAllCollapsed;
                                      $localStorage.IsAllCollapsed = $scope.IsAllCollapsed;
                                      BindCollapseToData($scope.employees);
                                  }

Outside function:

    function BindCollapseToData(DataColl) {
                           DataColl.forEach(function (item) {
                               item.isCollapsed = $scope.IsAllCollapsed;
                           })
                       }

Upvotes: 1

Related Questions