After successfully creating a table using Angular, I decided to incorporate a local storage feature. Despite my efforts, I'm struggling with implementing gsklee/ngStorage and gregory/angular-local-storage libraries into my existing code.
Could someone please lend a hand? Thank you in advance for your time.
script.js
(function() {
"use strict";
var table = angular.module('myTable', ['angularUtils.directives.dirPagination','ngStorage']);
table.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start;
return input.slice(start);
}
return [];
}
});
table.controller('TodoCtrl', function($scope, $http, $localStorage) {
$http.get('todos.json').then(function(res) {
$scope.todos = res.data;
});
$scope.currentPage = 1;
$scope.entryLimit = 5;
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
};
$scope.DeveloperDelete = function (id){
var result = confirm('Are you sure?');
if (result === true) {
var index = getSelectedIndex(id);
$scope.todos.splice(index, 1);
};
};
function getSelectedIndex(id){
for(var i = 0; i < $scope.todos.length; i++)
if($scope.todos[i].id == id)
return i;
return -1;
};
$scope.addDeveloperRow = function(){
$scope.todos.push({ 'id':$scope.id, 'text': $scope.text, 'color':$scope.color, "progress:":$scope.progress});
$scope.id='';
$scope.text='';
$scope.color='';
$scope.progress='';
};
});
})();
index.html
<!doctype html>
<html ng-app="myTable" >
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<script src="dirPagination.js"></script>
<script src="ngStorage.js"></script>
... (omitted for brevity)