Post
Ask Question

LocalStorage in AngularJS

Form Design code for User Table

  1. <div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">  
  2.     <button class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;  
  3. margin-top: 7px">  
  4.         <span class="glyphicon glyphicon-user"></span>Create New User  
  5.     </button>  
  6.     <label id="msgLab" style="color: #008080; font-size: large"></label>  
  7.     <br /><%--  
  8.     <label >  
  9. Search:</label>--%>  
  10.     <br /><%--   
  11.     <input type="text" ng-model="search" ng-keydown="clear()" style="margin-left: 980px;" placeholder="Search">--%>  
  12.         <hr />  
  13.         <div class="manish">  
  14.             <h3>  
  15. Users</h3>  
  16.             <hr />  
  17.             <form class="navbar-form" role="search">  
  18.                 <div class="input-group add-on">  
  19.                     <input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term" id="search" class="form-control" type="text">  
  20.                         <div class="input-group-btn">  
  21.                             <button class="btn btn-default" type="submit">  
  22.                                 <i class="glyphicon glyphicon-search"></i> Search  
  23.                             </button>  
  24.                         </div>  
  25.                     </div>  
  26.                 </form>  
  27.                 <pagination style="margin-left: 850px;" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" boundary-links="true" previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>  
  28.                 <br />  
  29. [   
  30.                 <a href="" ng-click="Btn=''">Reset</a> ]  
  31.   
  32.                 <table class="table table-striped table-bordered table-condensed">  
  33.                     <thead>  
  34.                         <tr class="danger"><%--   
  35.                             <th>  
  36. ID  
  37. </th>--%>  
  38.                             <th>  
  39.                                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  40.                                 <a href="" ng-click="Btn = '-fName'; reverse=true">First Name</a>  
  41.                             </th>  
  42.                             <th class="text-center">  
  43.                                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  44.                                 <a href="" ng-click="Btn = '-lName'; reverse=true">Last Name</a>  
  45.                             </th>  
  46.                             <th class="text-center" colspan="2">  
  47.                                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  48.                                 <a href="" ng-click="Btn = '-email'; reverse=true">Email Id</a>  
  49.                             </th>  
  50.                             <th class="text-center" colspan="2">  
  51.                                 <a href="" ng-click="Btn = 'num'; reverse=true"></a>  
  52.                                 <a href="" ng-click="Btn = '-number'; reverse=true">Phone Number</a>  
  53.                             </th>  
  54.                             <th class="text-center" colspan="2" >  
  55. Image  
  56. </th>  
  57.                             <th class="text-center">  
  58. Action  
  59. </th>  
  60.                         </tr>  
  61.                     </thead>  
  62.                     <tbody>  
  63.                         <tr style="color: #7A2900" ng-repeat="user in usersa | filter:search | orderBy:Btn:reverse "><%--   
  64.                             <td class="danger" class="text-center">  
  65. {{user.id }}  
  66. </td>--%>  
  67.                             <td>  
  68. {{user.fName }}  
  69. </td>  
  70.                             <td class="text-center">   
  71. {{user.lName }}  
  72. </td>  
  73.                             <td class="text-center" colspan="2">  
  74. {{user.email }}  
  75. </td>  
  76.                             <td class="text-center" colspan="2">  
  77. {{user.number }}  
  78. </td>  
  79.                             <td class="text-center" colspan="2">  
  80.                                 <img ng-src="upload/{{user.hid}}" height="100px" width="100px" />  
  81.                             </td>  
  82.                             <td class="text-center">  
  83.                                 <a href="#" class="btn btn-primary" ng-click="edit(user.id)">  
  84.                                     <span class="glyphicon glyphicon-pencil"></span>Edit  
  85.                                 </a> |   
  86.                                 <a href="#" class="btn btn-danger" ng-click="del(user.id)">  
  87.                                     <span  
  88. class="glyphicon glyphicon-remove"></span>Delete  
  89.                                 </a>  
  90.                             </td>  
  91.                         </tr>  
  92.                     </tbody>  
  93.                 </table>  
  94.                 <p ng-hide="true">   
  95. total Items: {{totalItems}}  
  96.                     <br />  
  97. Items per page: {{itemsPerPage}}  
  98.                     <br />  
  99. Current Page: {{currentPage}}  
  100.   
  101.                 </p>  
  102.             </div>  
  103.         </div>  


Code For User Form Design
  1. <div class="form-horizontal" name="myForm" ng-show="edit2" ng-hide="true">  
  2.     <hr />  
  3.     <h3 ng-show="edit1" ng-hide="false">  
  4. Create New User:</h3>  
  5.     <h3 ng-show="edit11" ng-hide="false"">  
  6. Edit User:</h3>  
  7.     <input type="hidden" ng-model="newuser.id" />  
  8.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  9.         <label class="col-sm-2 control-label">  
  10. First Name:</label>  
  11.         <div class="col-sm-10">  
  12.             <input type="text" id="fname" name="fName" ng-model="newuser.fName" placeholder="First Name" />  
  13.         </div>  
  14.     </div>  
  15.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  16.         <label class="col-sm-2 control-label">  
  17. Last Name:</label>  
  18.         <div class="col-sm-10">  
  19.             <input type="text" id="lname" name="lname" ng-model="newuser.lName" placeholder="Last Name" />  
  20.         </div>  
  21.     </div>  
  22.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  23.         <label class="col-sm-2 control-label">  
  24. Email Id:</label>  
  25.         <div class="col-sm-10">  
  26.             <input type="text" id="email" name="email" ng-model="newuser.email" placeholder="Email ID" />  
  27.         </div>  
  28.     </div>  
  29.     <div class="form-group" ng-show="edit5" ng-hide="false">  
  30.         <label class="col-sm-2 control-label">  
  31. Phone No:</label>  
  32.         <div class="col-sm-10">  
  33.             <input type="text" id="numb" class="num" name="num" ng-model="newuser.number" placeholder="Enter Phone NO" />  
  34.         </div>  
  35.     </div>  
  36.     <div class="form-group">  
  37.         <label class="col-sm-2 control-label">  
  38. Birth Date:</label>  
  39.         <div class="col-sm-2">  
  40.             <p class="input-group">  
  41.                 <input type="text" name="bday" id="bday" class="form-control" ng-focus="open($event)" ng-blur="out()" datepicker-popup="{{format}}" ng-model="newuser.bdate" is-open="opened" readonly="readonly" />  
  42.                 <span class="input-group-btn">  
  43.                     <button type="button" class="btn btn-default" ng-click="open($event)">  
  44.                         <i class="glyphicon glyphicon-calendar"></i>  
  45.                     </button>  
  46.                 </span>  
  47.             </p>  
  48.         </div>  
  49.     </div>  
  50.     <div class="form-group" ng-show="edit7" ng-hide="false">  
  51.         <label class="col-sm-2 control-label">  
  52. Image:</label>  
  53.         <div class="col-sm-15">  
  54.             <input type="file" file-model="myFile" id="myFile" class="btn btn-primary"/>  
  55.             <button ng-click="uploadFile()" class="btn btn-primary">  
  56.                 <span class="glyphicon glyphicon-upload"> Upload File</span>  
  57.             </button>  
  58.             <br />  
  59.         </div>  
  60.     </div>  
  61.     <div class="col-sm-10" ng-show="remove" ng-hide="true" style="margin-left: 170px" >  
  62.         <img id="getimg" height="100px" width="100px"/>  
  63.         <button class="btn btn-danger" ng-click="removefile()" ng-show="remove1" ng-hide="false">  
  64.             <span  
  65. class="glyphicon glyphicon-remove"></span>Remove  
  66.         </button>  
  67.     </div>  
  68.     <div class="form-group">  
  69.         <input type="text" id="hid" name="hid" ng-model="newuser.hid" ng-hide="true"/>  
  70.     </div>  
  71.     <hr />  
  72.     <button class="btn btn-primary" ng-click="saveUser()">  
  73.         <span class="glyphicon glyphicon-save"></span>Save Data  
  74.   
  75.     </button>  
  76.     <button id="cbtn" class="btn btn-danger" ng-click="cancel()">  
  77.         <span class="glyphicon glyphicon-cancel"></span>Cancel  
  78.   
  79.     </button>  
  80. </div>  


Save Button Code
  1. $scope.saveUser = function() {  
  2.     var a = $("#hid").val();  
  3.     $.ajax({  
  4.         type: "POST",  
  5.         url: "localstorage2.aspx/SaveUser",  
  6.         contentType: "application/json; charset=utf-8",  
  7.         data: JSON.stringify({  
  8.             id: $scope.id,  
  9.             fName: $scope.fName,  
  10.             lName: $scope.lName,  
  11.             email: $scope.email,  
  12.             number: $scope.number,  
  13.             hid: $scope.hid = a  
  14.         }),  
  15.         success: function(data) {  
  16.             strErrorMsg = "";  
  17.             notEmpty(document.getElementById('fname'), '-Enter your first name.');  
  18.             notEmpty(document.getElementById('lname'), '-Enter your last name.');  
  19.             notEmpty(document.getElementById('email'), '-Enter your Email ID.');  
  20.             notEmpty(document.getElementById('numb'), '-Enter your Phone NO.');  
  21.             notEmpty(document.getElementById('bday'), '-Enter your birth date.');  
  22.             validateEmail(document.getElementById('email'), '-Enter Valid Email');  
  23.             ValidMno(document.getElementById('numb'), '-Enter Valid Phone No');  
  24.   
  25.             if (strErrorMsg == '') {  
  26.                 var data = localStorage.getItem('iid');  
  27.                 studa = JSON.parse(data);  
  28.                 if ($scope.id == 0) {  
  29.                     $scope.id = aid++;  
  30.                     $scope.users.push({  
  31.                         id: $scope.id,  
  32.                         fName: $scope.fName,  
  33.                         lName: $scope.lName,  
  34.                         email: $scope.email,  
  35.                         number: $scope.number,  
  36.                         hid: $scope.hid = a  
  37.                     });  
  38.                     $("#msgLab").text("Record Save successfully");  
  39.                     localStorage.setItem('iid', angular.toJson($scope.id));  
  40.                 } else {  
  41.                     for (i in $scope.users) {  
  42.                         if ($scope.users[i].id == $scope.id) {  
  43.                             $scope.users[i] = ({  
  44.                                 id: $scope.id,  
  45.                                 fName: $scope.fName,  
  46.                                 lName: $scope.lName,  
  47.                                 email: $scope.email,  
  48.                                 number: $scope.number,  
  49.                                 hid: $scope.hid  
  50.                             });  
  51.                             $scope.users[i].hid = a;  
  52.                             $("#msgLab").text("Record Edit successfully");  
  53.                         }  
  54.                     }  
  55.                 }  
  56.                 localStorage.setItem('stu', angular.toJson($scope.users));  
  57.                 $scope.totalItems = $scope.users.length;  
  58.                 $scope.itemsPerPage = 3  
  59.                 $scope.currentPage = 1;  
  60.   
  61.                 $scope.maxSize = 5;  
  62.                 $scope.bigTotalItems = 175;  
  63.                 $scope.bigCurrentPage = 1;  
  64.   
  65.                 $scope.pageCount = function() {  
  66.                     return Math.ceil($scope.Friends.length / $scope.itemsPerPage);  
  67.                 };  
  68.                 $scope.edit2 = false;  
  69.                 $scope.edit3 = true;  
  70.                 $scope.$apply();  
  71.             }  
  72.             $window.alert(' Errors \n' + strErrorMsg);  
  73.         },  
  74.         error: function() {  
  75.             alert("error");  
  76.         }  
  77.   
  78.     });  
  79. };  

Cancel button Code

  1. $scope.cancel = function () 
  2. {  
  3.    $scope.edit2 = false;  
  4.    $scope.edit3 = true;  
  5. };  

Delete button code

  1. $scope.del = function(id)   
  2. {  
  3.     var deleteUser = $window.confirm('Are you sure you want to Record delete?');  
  4.     if (deleteUser) {  
  5.         $window.alert('One Record Delete');  
  6.         for (i in $scope.users) {  
  7.             if ($scope.users[i].id == id)   
  8.             {  
  9.                 if ($scope.users[i].hid != "noimage.jpg")   
  10.                 {  
  11.                     $.ajax({  
  12.                         type: "POST",  
  13.                         url: "localstorage2.aspx/DeleteImage",  
  14.                         contentType: "application/json; charset=utf-8",  
  15.                         data: JSON.stringify({  
  16.                             hid: $scope.users[i].hid  
  17.                         }),  
  18.                         success: function(data) {  
  19.                             alert("succc");  
  20.                         },  
  21.                         error: function() {  
  22.                             //alert("error");  
  23.                         }  
  24.                     });  
  25.                 }  
  26.                 $scope.users.splice(i, 1);  
  27.                 $scope.newuser = {};  
  28.                 $("#msgLab").text("Record Delete successfully");  
  29.                 localStorage.setItem('stu', angular.toJson($scope.users));  
  30.                 //localStorage.setItem('iid', angular.toJson($scope.newuser.id));  
  31.             }  
  32.         }  
  33.     }  
  34. };  


Edit Button Code
  1. $scope.edit = function(id) {  
  2.     for (i in $scope.users) {  
  3.         if ($scope.users[i].id == id) {  
  4.             if ($scope.users[i].hid == "noimage.jpg") {  
  5.                 $scope.remove1 = false;  
  6.             } else {  
  7.                 $scope.remove1 = true;  
  8.             }  
  9.             ({  
  10.                 id: $scope.id,  
  11.                 fName: $scope.fName,  
  12.                 lName: $scope.lName,  
  13.                 email: $scope.email,  
  14.                 number: $scope.number,  
  15.                 hid: $scope.hid  
  16.             }) = angular.copy($scope.users[i]);  
  17.             $("#getimg").attr('src', 'upload/' + $scope.users[i].hid);  
  18.             $scope.edit2 = true;  
  19.             $scope.edit3 = false;  
  20.             $scope.edit5 = true;  
  21.             $scope.edit1 = false;  
  22.             $scope.edit11 = true;  
  23.             $(myFile).val('');  
  24.             $("#msgLab").text("");  
  25.             $scope.remove = true;  
  26.         }  
  27.     }  
  28.   
  29. };  




Remove Image at Edit time remove code
  1. $scope.removefile = function () {  
  2. var Removeimg = $window.confirm('Are you sure you want to Remove The Image?');  
  3. if (Removeimg) {  
  4. $("#hid").val("noimage.jpg");  
  5. $("#getimg").attr('src', 'upload/noimage.jpg');  
  6. if ($("#hid").val() == "noimage.jpg") {  
  7. $scope.remove1 = false;  
  8. } else {  
  9. $scope.remove1 = true;  
  10. }  
  11. }  
  12. };  
Create a New User Code
  1. $scope.editUser = function()  
  2. {  
  3.     $scope.fName = "";  
  4.     $scope.lName = "";  
  5.     $scope.email = "";  
  6.     $scope.number = "";  
  7.     $scope.edit1 = true;  
  8.     $scope.edit11 = false;  
  9.     $scope.edit2 = true;  
  10.     $scope.edit3 = false;  
  11.     $scope.edit5 = true;  
  12.     $scope.edit6 = true;  
  13.     $(myFile).val('');  
  14.     $("#hid").val("noimage.jpg");  
  15.     $("#msgLab").text("");  
  16.     $scope.remove = false;  
  17.     $scope.id = 0;  
  18. };

File Upload code

  1. $scope.uploadFile = function ()   
  2. {  
  3.     var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  
  4.     if ($(myFile).val() == "") {  
  5.     alert("Select a file");  
  6. }  
  7.     else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {  
  8.     alert("Select a image file");  
  9.     $(myFile).val('');  
  10.     $("#hid").val("noimage.jpg");  
  11. }   
  12. else   
  13. {  
  14.     var file = $scope.myFile;  
  15.     var uploadUrl = "Image.aspx";  
  16.     fileUpload.uploadFileToUrl(file, uploadUrl);  
  17.     $scope.myFile = "";  
  18.     $scope.remove = true;  
  19.     $scope.remove1 = true;  
  20.     var reader = new FileReader();  
  21.     reader.onload = function (e) {  
  22.     scope.image = e.target.result;  
  23.     scope.$apply();  
  24. }  
  25. }  
  26.     elem.on('change', function () {  
  27.     reader.readAsDataURL(elem[0].files[0]);  
  28. });  
  29. };   
  30.     localstorage2.aspx Code For Delete a File From Folder  
  31.     <Services.WebMethod()>  
  32.     Public Shared Function DeleteImage(ByVal hid As String) As String  
  33.     If System.IO.File.Exists("D:\manish\Localstor\upload\" & hid) Then  
  34.     System.IO.File.Delete("D:\manish\Localstor\upload\" & hid)  
  35. Else  
  36. End If  
  37. End Function  
Image.aspx Code For Upload Fie
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
  2. Response.Clear()  
  3.     Dim fileid As String = System.Guid.NewGuid.ToString()  
  4.     ' Dim fname As String = Context.Request.Files.Get(0).FileName()  
  5.     Context.Request.Files.Get(0).SaveAs("D:\manish\Localstor\upload\" & fileid & ".jpg")  
  6.     Response.Write(fileid)  
  7.     Response.End()  
  8. End Sub
Next Recommended Reading Store Data Locally using $localstorage in AngularJS