Editing a User LocalStorage using AngularJS
0
I am creating a webpage where I can perform CRUD functions using localStorage on AngularJS. So far I am able to ADD, DELETE users and save them to the localStorage.
But I am unable to save the edited user details in the localStorage. The "$scope.selectUser = function (user)" is the function I use for editing a user.
Editing a user works, but they get erased on web page refresh. Which means the data of the edited user isn't getting stored. Looking for someone to guide me. Thanks in advance
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>javascript html angularjs
asked Nov 11 at 16:02
Vaibhav27
14
|
show 6 more comments
0
I am creating a webpage where I can perform CRUD functions using localStorage on AngularJS. So far I am able to ADD, DELETE users and save them to the localStorage.
But I am unable to save the edited user details in the localStorage. The "$scope.selectUser = function (user)" is the function I use for editing a user.
Editing a user works, but they get erased on web page refresh. Which means the data of the edited user isn't getting stored. Looking for someone to guide me. Thanks in advance
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>javascript html angularjs
asked Nov 11 at 16:02
Vaibhav27
14
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04
|
show 6 more comments
0
0
0
I am creating a webpage where I can perform CRUD functions using localStorage on AngularJS. So far I am able to ADD, DELETE users and save them to the localStorage.
But I am unable to save the edited user details in the localStorage. The "$scope.selectUser = function (user)" is the function I use for editing a user.
Editing a user works, but they get erased on web page refresh. Which means the data of the edited user isn't getting stored. Looking for someone to guide me. Thanks in advance
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>javascript html angularjs
asked Nov 11 at 16:02
Vaibhav27
14
I am creating a webpage where I can perform CRUD functions using localStorage on AngularJS. So far I am able to ADD, DELETE users and save them to the localStorage.
But I am unable to save the edited user details in the localStorage. The "$scope.selectUser = function (user)" is the function I use for editing a user.
Editing a user works, but they get erased on web page refresh. Which means the data of the edited user isn't getting stored. Looking for someone to guide me. Thanks in advance
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.info = "";
if (localStorage.getItem("users") === null)
$scope.users = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
//localStorage.setItem("email", $scope.users);
;
$scope.selectUser = function (user)
$scope.clickedUser = user;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.editUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
// $scope.users.push($scope.editUser);
$scope.users.push($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
$scope.deleteUser = function ()
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Management- M&M</title>
<link rel="icon" href="images/logo.jpg">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">-->
<!--<link href="CSS/Home.css" rel="stylesheet" />-->
</head>
<body ng-app="myApp" ng-controller="myController">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">
<img src="images/logo.jpg" alt="M&M" width="110" />
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="LoginPage.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active js-scroll-trigger" href="User_Mgmt.html">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="CompanyManagement.html">Company Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ProductPage.html">Product Management</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="ShoppingCart_Group5_Team1.html">Shopping Cart</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="subhead">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<input class="form-control" id="ex3" type="text" placeholder="Search Users" ng-model="searchUsers">
</div>
<div class="col-xs-6 col-md-6">
<button type="button" class="btn btn-info btn-lg float-right" data-toggle="modal" data-target="#myModal">Add New</button>
</div>
<div class="clearfix"></div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="table100-head">
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact</th>
<th>Role</th>
<th>Company</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: searchUsers track by $index">
<td>user.email</td>
<td>user.firstName</td>
<td>user.lastName</td>
<td>user.contact</td>
<td>user.role</td>
<td>user.company</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pop Up-ADD NEW USER Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="newUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="newUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="newUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="newUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="newUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-EDIT USER Modal -->
<div class="modal fade" id="myModalEdit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Enter Email" ng-model="clickedUser.email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter First Name" ng-model="clickedUser.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Last Name" ng-model="clickedUser.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<input type="tel" class="form-control" placeholder="Enter Contact" ng-model="clickedUser.contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Role</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Role" ng-model="clickedUser.role">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Company</label>
<div class="col-sm-10">
<select class="form-control" placeholder="Select Company" ng-model="clickedUser.company">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal" ng-click="editUser()">Submit</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pop Up-DELETE USER Modal -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Are You Sure?</h5>
</div>
<div class="modal-body">
<h5 style="color: red">You are going to delete the user "clickedUser.firstName"</h5>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>javascript html angularjs
javascript html angularjs
asked Nov 11 at 16:02
Vaibhav27
14
asked Nov 11 at 16:02
Vaibhav27
14
edited Nov 11 at 17:38
asked Nov 11 at 16:02
Vaibhav27
14
asked Nov 11 at 16:02
Vaibhav27
14
asked Nov 11 at 16:02
Vaibhav27
14
14
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04
|
show 6 more comments
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04
|
show 6 more comments
1 Answer
1
active
oldest
votes
0
Following changes are done on the controller.js file
Provide the id to each user object so they can be track efficiently without checking reference of object.
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
While selecting user create a new object instead of setting the reference of existing
$scope.clickedUser = Object.assign(,user);
While edit user iterate over the users object and update the edited user instead of setting the reference
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
Delete user method
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
Complete code for controller.js file
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.clickedUser = ;
$scope.info = "";
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
if (localStorage.getItem("users") === null)
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push(Object.assign("id":Date.now(),$scope.newUser));
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.selectUser = function (user)
$scope.clickedUser = Object.assign(,user);
;
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);
answered Nov 12 at 5:34
front_end_dev
1,3251511
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250536%2fediting-a-user-localstorage-using-angularjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Following changes are done on the controller.js file
Provide the id to each user object so they can be track efficiently without checking reference of object.
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
While selecting user create a new object instead of setting the reference of existing
$scope.clickedUser = Object.assign(,user);
While edit user iterate over the users object and update the edited user instead of setting the reference
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
Delete user method
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
Complete code for controller.js file
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.clickedUser = ;
$scope.info = "";
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
if (localStorage.getItem("users") === null)
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push(Object.assign("id":Date.now(),$scope.newUser));
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.selectUser = function (user)
$scope.clickedUser = Object.assign(,user);
;
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);
answered Nov 12 at 5:34
front_end_dev
1,3251511
add a comment |
0
Following changes are done on the controller.js file
Provide the id to each user object so they can be track efficiently without checking reference of object.
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
While selecting user create a new object instead of setting the reference of existing
$scope.clickedUser = Object.assign(,user);
While edit user iterate over the users object and update the edited user instead of setting the reference
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
Delete user method
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
Complete code for controller.js file
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.clickedUser = ;
$scope.info = "";
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
if (localStorage.getItem("users") === null)
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push(Object.assign("id":Date.now(),$scope.newUser));
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.selectUser = function (user)
$scope.clickedUser = Object.assign(,user);
;
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);
answered Nov 12 at 5:34
front_end_dev
1,3251511
add a comment |
0
0
0
Following changes are done on the controller.js file
Provide the id to each user object so they can be track efficiently without checking reference of object.
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
While selecting user create a new object instead of setting the reference of existing
$scope.clickedUser = Object.assign(,user);
While edit user iterate over the users object and update the edited user instead of setting the reference
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
Delete user method
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
Complete code for controller.js file
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.clickedUser = ;
$scope.info = "";
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
if (localStorage.getItem("users") === null)
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push(Object.assign("id":Date.now(),$scope.newUser));
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.selectUser = function (user)
$scope.clickedUser = Object.assign(,user);
;
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);
answered Nov 12 at 5:34
front_end_dev
1,3251511
Following changes are done on the controller.js file
Provide the id to each user object so they can be track efficiently without checking reference of object.
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
While selecting user create a new object instead of setting the reference of existing
$scope.clickedUser = Object.assign(,user);
While edit user iterate over the users object and update the edited user instead of setting the reference
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
Delete user method
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
Complete code for controller.js file
var myApp = angular.module("myApp", );
myApp.controller("myController", function ($scope)
console.log("in controller...");
$scope.newUser = ;
$scope.clickedUser = ;
$scope.info = "";
function parseData(input)
return input.reduce(function (o, i)
o.push(Object.assign("id":Date.now(),i));
return o;
,);
if (localStorage.getItem("users") === null)
var initialData = [
email: "John@yahoo.com", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" ,
email: "Rick@yahoo.com", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" ,
email: "Sam@yahoo.com", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung"
];
$scope.users = parseData(initialData);
localStorage.setItem("users", JSON.stringify($scope.users));
else
$scope.users = JSON.parse(localStorage.getItem("users"));
$scope.saveUser = function ()
console.log("Saving...");
$scope.users.push(Object.assign("id":Date.now(),$scope.newUser));
$scope.info = "New User Added Successfully!";
$scope.newUser = ;
localStorage.setItem("users", JSON.stringify($scope.users));
;
$scope.selectUser = function (user)
$scope.clickedUser = Object.assign(,user);
;
$scope.editUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id === $scope.clickedUser.id)
user = Object.assign(user,$scope.clickedUser);
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Edited Successfully!";
;
$scope.deleteUser = function ()
$scope.users = $scope.users.reduce(function (o,user)
if(user.id !== $scope.clickedUser.id)
o.push(user);
return o;
,);
$scope.clickedUser = ;
console.log("Users detail => ",$scope.users);
localStorage.setItem("users", JSON.stringify($scope.users));
$scope.info = "User Deleted Successfully!";
;
$scope.clearInfo = function ()
$scope.info = "";
;
);
answered Nov 12 at 5:34
front_end_dev
1,3251511
answered Nov 12 at 5:34
front_end_dev
1,3251511
answered Nov 12 at 5:34
front_end_dev
1,3251511
answered Nov 12 at 5:34
front_end_dev
1,3251511
1,3251511
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53250536%2fediting-a-user-localstorage-using-angularjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What function of controller is called after edit modal submit
– front_end_dev
Nov 11 at 16:29
@Vaibhav27, localStorage is not removed by page refresh. There must be something going in your code. Are you clearing the storage any time or on controller initialization resetting it or something. Also the selectUser in the shown code is not making any change to user value before putting it back to Storage.
– nircraft
Nov 11 at 16:38
@Vaibhav27, i may not be getting it right but you said "It just doesn't get saved in the storage after refresh".. Well your users value is reinitialized after refresh in controller so older user data is lost that is the reason you do not have edited users after refresh
– nircraft
Nov 11 at 16:53
@Vaibhav27 clickedUser is variable not a function.
– front_end_dev
Nov 11 at 16:59
@front_end_dev oh yeah I got misunderstood. Yeah there is no ng-click function in the submit button for editing a user. Can you please tell me what should be done?
– Vaibhav27
Nov 11 at 17:04