LocalStorage in AngularJS

Form Design code for User Table

<div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">
<button class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;
margin-top: 7px">
<span class="glyphicon glyphicon-user"></span>Create New User
</button>
<label id="msgLab" style="color: #008080; font-size: large"></label>
<br /><%--
<label >
Search:</label>--%>
<br /><%--
<input type="text" ng-model="search" ng-keydown="clear()" style="margin-left: 980px;" placeholder="Search">--%>
<hr />
<div class="manish">
<h3>
Users</h3>
<hr />
<form class="navbar-form" role="search">
<div class="input-group add-on">
<input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term" id="search" class="form-control" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i> Search
</button>
</div>
</div>
</form>
<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>
<br />
[
<a href="" ng-click="Btn=''">Reset</a> ]
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr class="danger"><%--
<th>
ID
</th>--%>
<th>
<a href="" ng-click="Btn = 'name'; reverse=true"></a>
<a href="" ng-click="Btn = '-fName'; reverse=true">First Name</a>
</th>
<th class="text-center">
<a href="" ng-click="Btn = 'name'; reverse=true"></a>
<a href="" ng-click="Btn = '-lName'; reverse=true">Last Name</a>
</th>
<th class="text-center" colspan="2">
<a href="" ng-click="Btn = 'name'; reverse=true"></a>
<a href="" ng-click="Btn = '-email'; reverse=true">Email Id</a>
</th>
<th class="text-center" colspan="2">
<a href="" ng-click="Btn = 'num'; reverse=true"></a>
<a href="" ng-click="Btn = '-number'; reverse=true">Phone Number</a>
</th>
<th class="text-center" colspan="2" >
Image
</th>
<th class="text-center">
Action
</th>
</tr>
</thead>
<tbody>
<tr style="color: #7A2900" ng-repeat="user in usersa | filter:search | orderBy:Btn:reverse "><%--
<td class="danger" class="text-center">
{{user.id }}
</td>--%>
<td>
{{user.fName }}
</td>
<td class="text-center">
{{user.lName }}
</td>
<td class="text-center" colspan="2">
{{user.email }}
</td>
<td class="text-center" colspan="2">
{{user.number }}
</td>
<td class="text-center" colspan="2">
<img ng-src="upload/{{user.hid}}" height="100px" width="100px" />
</td>
<td class="text-center">
<a href="#" class="btn btn-primary" ng-click="edit(user.id)">
<span class="glyphicon glyphicon-pencil"></span>Edit
</a> |
<a href="#" class="btn btn-danger" ng-click="del(user.id)">
<span
class="glyphicon glyphicon-remove"></span>Delete
</a>
</td>
</tr>
</tbody>
</table>
<p ng-hide="true">
total Items: {{totalItems}}
<br />
Items per page: {{itemsPerPage}}
<br />
Current Page: {{currentPage}}
</p>
</div>
</div>

Code For User Form Design

<div class="form-horizontal" name="myForm" ng-show="edit2" ng-hide="true">
<hr />
<h3 ng-show="edit1" ng-hide="false">
Create New User:</h3>
<h3 ng-show="edit11" ng-hide="false"">
Edit User:</h3>
<input type="hidden" ng-model="newuser.id" />
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-2 control-label">
First Name:</label>
<div class="col-sm-10">
<input type="text" id="fname" name="fName" ng-model="newuser.fName" placeholder="First Name" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-2 control-label">
Last Name:</label>
<div class="col-sm-10">
<input type="text" id="lname" name="lname" ng-model="newuser.lName" placeholder="Last Name" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-2 control-label">
Email Id:</label>
<div class="col-sm-10">
<input type="text" id="email" name="email" ng-model="newuser.email" placeholder="Email ID" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-2 control-label">
Phone No:</label>
<div class="col-sm-10">
<input type="text" id="numb" class="num" name="num" ng-model="newuser.number" placeholder="Enter Phone NO" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Birth Date:</label>
<div class="col-sm-2">
<p class="input-group">
<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" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
<div class="form-group" ng-show="edit7" ng-hide="false">
<label class="col-sm-2 control-label">
Image:</label>
<div class="col-sm-15">
<input type="file" file-model="myFile" id="myFile" class="btn btn-primary"/>
<button ng-click="uploadFile()" class="btn btn-primary">
<span class="glyphicon glyphicon-upload"> Upload File</span>
</button>
<br />
</div>
</div>
<div class="col-sm-10" ng-show="remove" ng-hide="true" style="margin-left: 170px" >
<img id="getimg" height="100px" width="100px"/>
<button class="btn btn-danger" ng-click="removefile()" ng-show="remove1" ng-hide="false">
<span
class="glyphicon glyphicon-remove"></span>Remove
</button>
</div>
<div class="form-group">
<input type="text" id="hid" name="hid" ng-model="newuser.hid" ng-hide="true"/>
</div>
<hr />
<button class="btn btn-primary" ng-click="saveUser()">
<span class="glyphicon glyphicon-save"></span>Save Data
</button>
<button id="cbtn" class="btn btn-danger" ng-click="cancel()">
<span class="glyphicon glyphicon-cancel"></span>Cancel
</button>
</div>

Save Button Code

$scope.saveUser = function() {
var a = $("#hid").val();
$.ajax({
type: "POST",
url: "localstorage2.aspx/SaveUser",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
id: $scope.id,
fName: $scope.fName,
lName: $scope.lName,
email: $scope.email,
number: $scope.number,
hid: $scope.hid = a
}),
success: function(data) {
strErrorMsg = "";
notEmpty(document.getElementById('fname'), '-Enter your first name.');
notEmpty(document.getElementById('lname'), '-Enter your last name.');
notEmpty(document.getElementById('email'), '-Enter your Email ID.');
notEmpty(document.getElementById('numb'), '-Enter your Phone NO.');
notEmpty(document.getElementById('bday'), '-Enter your birth date.');
validateEmail(document.getElementById('email'), '-Enter Valid Email');
ValidMno(document.getElementById('numb'), '-Enter Valid Phone No');
if (strErrorMsg == '') {
var data = localStorage.getItem('iid');
studa = JSON.parse(data);
if ($scope.id == 0) {
$scope.id = aid++;
$scope.users.push({
id: $scope.id,
fName: $scope.fName,
lName: $scope.lName,
email: $scope.email,
number: $scope.number,
hid: $scope.hid = a
});
$("#msgLab").text("Record Save successfully");
localStorage.setItem('iid', angular.toJson($scope.id));
} else {
for (i in $scope.users) {
if ($scope.users[i].id == $scope.id) {
$scope.users[i] = ({
id: $scope.id,
fName: $scope.fName,
lName: $scope.lName,
email: $scope.email,
number: $scope.number,
hid: $scope.hid
});
$scope.users[i].hid = a;
$("#msgLab").text("Record Edit successfully");
}
}
}
localStorage.setItem('stu', angular.toJson($scope.users));
$scope.totalItems = $scope.users.length;
$scope.itemsPerPage = 3
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
$scope.pageCount = function() {
return Math.ceil($scope.Friends.length / $scope.itemsPerPage);
};
$scope.edit2 = false;
$scope.edit3 = true;
$scope.$apply();
}
$window.alert(' Errors \n' + strErrorMsg);
},
error: function() {
alert("error");
}
});
};

Cancel button Code

$scope.cancel = function ()
{
$scope.edit2 = false;
$scope.edit3 = true;
};

Delete button code

$scope.del = function(id)
{
var deleteUser = $window.confirm('Are you sure you want to Record delete?');
if (deleteUser) {
$window.alert('One Record Delete');
for (i in $scope.users) {
if ($scope.users[i].id == id)
{
if ($scope.users[i].hid != "noimage.jpg")
{
$.ajax({
type: "POST",
url: "localstorage2.aspx/DeleteImage",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
hid: $scope.users[i].hid
}),
success: function(data) {
alert("succc");
},
error: function() {
//alert("error");
}
});
}
$scope.users.splice(i, 1);
$scope.newuser = {};
$("#msgLab").text("Record Delete successfully");
localStorage.setItem('stu', angular.toJson($scope.users));
//localStorage.setItem('iid', angular.toJson($scope.newuser.id));
}
}
}
};

Edit Button Code

$scope.edit = function(id) {
for (i in $scope.users) {
if ($scope.users[i].id == id) {
if ($scope.users[i].hid == "noimage.jpg") {
$scope.remove1 = false;
} else {
$scope.remove1 = true;
}
({
id: $scope.id,
fName: $scope.fName,
lName: $scope.lName,
email: $scope.email,
number: $scope.number,
hid: $scope.hid
}) = angular.copy($scope.users[i]);
$("#getimg").attr('src', 'upload/' + $scope.users[i].hid);
$scope.edit2 = true;
$scope.edit3 = false;
$scope.edit5 = true;
$scope.edit1 = false;
$scope.edit11 = true;
$(myFile).val('');
$("#msgLab").text("");
$scope.remove = true;
}
}
};

Remove Image at Edit time remove code

$scope.removefile = function () {
var Removeimg = $window.confirm('Are you sure you want to Remove The Image?');
if (Removeimg) {
$("#hid").val("noimage.jpg");
$("#getimg").attr('src', 'upload/noimage.jpg');
if ($("#hid").val() == "noimage.jpg") {
$scope.remove1 = false;
} else {
$scope.remove1 = true;
}
}
};

Create a New User Code

$scope.editUser = function()
{
$scope.fName = "";
$scope.lName = "";
$scope.email = "";
$scope.number = "";
$scope.edit1 = true;
$scope.edit11 = false;
$scope.edit2 = true;
$scope.edit3 = false;
$scope.edit5 = true;
$scope.edit6 = true;
$(myFile).val('');
$("#hid").val("noimage.jpg");
$("#msgLab").text("");
$scope.remove = false;
$scope.id = 0;
};

File Upload code

$scope.uploadFile = function ()
{
var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($(myFile).val() == "") {
alert("Select a file");
}
else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {
alert("Select a image file");
$(myFile).val('');
$("#hid").val("noimage.jpg");
}
else
{
var file = $scope.myFile;
var uploadUrl = "Image.aspx";
fileUpload.uploadFileToUrl(file, uploadUrl);
$scope.myFile = "";
$scope.remove = true;
$scope.remove1 = true;
var reader = new FileReader();
reader.onload = function (e) {
scope.image = e.target.result;
scope.$apply();
}
}
elem.on('change', function () {
reader.readAsDataURL(elem[0].files[0]);
});
};
localstorage2.aspx Code For Delete a File From Folder
<Services.WebMethod()>
Public Shared Function DeleteImage(ByVal hid As String) As String
If System.IO.File.Exists("D:\manish\Localstor\upload\" & hid) Then
System.IO.File.Delete("D:\manish\Localstor\upload\" & hid)
Else
End If
End Function

Image.aspx Code For Upload Fie
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Clear()
Dim fileid As String = System.Guid.NewGuid.ToString()
' Dim fname As String = Context.Request.Files.Get(0).FileName()
Context.Request.Files.Get(0).SaveAs("D:\manish\Localstor\upload\" & fileid & ".jpg")
Response.Write(fileid)
Response.End()
End Sub

5 Comments

Join the conversation! Your thoughts help the community grow.

Nachtshe HopeMan11y ago
tnx
Manish Pipaliya11y ago
same as this code but you apply this code in c# syntex
Nachtshe HopeMan11y ago
Well done Very helpful................. How do I upload a file in C# With angular?
Manish Pipaliya11y ago
Thanks Sir...
Santhakumar Munuswamy11y ago
nice