how to fix the color of the button when ng-click done using ng-storage? - html

Question

i have the two buttons. Defullt color of the buttos is green. when first time cilck on button the color of the button will move to red. but when refreshing the the color of the buttons will go to the default color.
please help me how to make the color of the buttons stranded when refreshing the page.
<script>
var app = angular.module('plunker', ["ngStorage"]);
app.controller('MainCtrl', function($scope,$localStorage) {
$scope.tablelist = [{"tablename":"t1"},{"tablename":"t2"}]
if($localStorage.tableArray === undefined){
$localStorage.tableArray = []
}
if($localStorage.tableslist===undefined){
$localStorage.tableslist=[]
}
$scope.getTable=function(table){
table.btnClass = table.btnClass == "btn-danger" ? "btn-success" : "btn-danger"
var exists=false;
angular.forEach($localStorage.tableArray, function (list,$index) {
if ((list.tablename == table.tablename)) {
console.log(list.tablename)
console.log(table.tablename)
exists=true;
$localStorage.tableArray.splice($index,1)
$localStorage.tableArray.splice($index,1)
return false
}
});
if(!exists){
$localStorage.tableslist.push(table)
$localStorage.tableArray=$localStorage.tableslist;
$scope.$storage=$localStorage.tableArray
console.log($localStorage.tableArray)
table.color="red"
}
}
});
`https://plnkr.co/edit/pSld7q89t1DCZ6l4pglZ?p=preview

Answer 1

You are clearing storage data in $localStorage.tableArray every time click
event fires, so you have to pass the stored cssClass from that array to $scope.tablelist before clearing it. It worked with me by doing the following:
1- add $filter to controller:
app.controller('MainCtrl', function ($scope, $localStorage, $filter) {
2- add following code before $scope.getTable = function:
angular.forEach($scope.tablelist, function (list, $index)
{
var found = $filter('filter')($localStorage.tableArray,
{ tablename: list.tablename }, true);
if (found.length) {$scope.tablelist[$index].btnClass = found[0].btnClass;}
});
EDIT:
This is the plnkr link:
https://plnkr.co/edit/x32vQIJO6wbzZjDa77WH?p=preview