In this post i am explaining about what is angular.copy or what is the use of angular.copy with example.
recommended reading: angularJS tutorial
Consider you have a page in which you are showing list of records on a table and you have a edit form on the same page. When you click on some record then the Edit Form of that field will be displayed.
When you edit some field on the edit form, then it will update the record showing in the table instantly(before clicking update/save) button. This problem arises when you have table(list of records) and Edit form on a single page. As shown in the below picture.
You can solve this issue by using angular.copy. Instead of binding to a value directly , we can make a deep copy of that object and use it for editing.
Example:
Consider you have the following html
And your javascript will be
You have a table which is showing the list of records and above the table you have a form through which you can edit the first name of any record. First you have to select the record, the first name of the record will be displayed in the textbox and then you have to edit the name then click on save button , finally it gets saved.
But the problem here is when you start typing in the textbox that will get updated in the table at the same time.
Change your html so that you use the new copied object in Edit Form
Now change your javascript to:
Now as your table's employee object and Edit form's employee object are different. It will get updated only after clicking on save button.
This is the use of angular.copy.
recommended reading: angularJS tutorial
Consider you have a page in which you are showing list of records on a table and you have a edit form on the same page. When you click on some record then the Edit Form of that field will be displayed.
When you edit some field on the edit form, then it will update the record showing in the table instantly(before clicking update/save) button. This problem arises when you have table(list of records) and Edit form on a single page. As shown in the below picture.
You can solve this issue by using angular.copy. Instead of binding to a value directly , we can make a deep copy of that object and use it for editing.
Example:
Consider you have the following html
<html ng-app="app">
<head lang="en">
<title>Angular copy example</title>
</head>
<body ng-controller="AppCtrl">
<form>
<input type="text" ng-model="selectedEmployee.firstName" />
<button ng-click="saveEmployee(selectedEmployee)">Save</button>
</form>
<table>
<thead>
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Email</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-click="selectEmployee(employee)">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.phone}}</td>
</tr>
</tbody>
</table>
</body>
</html>
<head lang="en">
<title>Angular copy example</title>
</head>
<body ng-controller="AppCtrl">
<form>
<input type="text" ng-model="selectedEmployee.firstName" />
<button ng-click="saveEmployee(selectedEmployee)">Save</button>
</form>
<table>
<thead>
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Email</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-click="selectEmployee(employee)">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.phone}}</td>
</tr>
</tbody>
</table>
</body>
</html>
And your javascript will be
var app = angular.module("app", []);
app.controller("AppCtrl", function ($scope) {
$scope.employees = [
{ "firstName": "Anderson", "lastName": "Brit", "email": "brit@demo.com" },
{ "firstName": "John", "lastName": "Cena", "email": "cena@demo.com" },
{ "firstName": "Andy", "lastName": "Murray", "email": "murray@demo.com" },
{ "firstName": "Chriss", "lastName": "Merry", "email": "merry@demo.com" },
{ "firstName": "Peter", "lastName": "Andrew", "email": "andrew@demo.com" },
{ "firstName": "Loosy", "lastName": "Mally", "email": "mally@demo.com" },
{ "firstName": "John", "lastName": "Goray", "email": "goray@demo.com" }
];
$scope.selectEmployee = function (employee) {
$scope.selectedEmployee = employee; //model to use in Edit Form
}
this.saveEmployee = function (contactToUpdate) {
$scope.selectedEmployee.firstName = contactToUpdate.FirstName
}
});
app.controller("AppCtrl", function ($scope) {
$scope.employees = [
{ "firstName": "Anderson", "lastName": "Brit", "email": "brit@demo.com" },
{ "firstName": "John", "lastName": "Cena", "email": "cena@demo.com" },
{ "firstName": "Andy", "lastName": "Murray", "email": "murray@demo.com" },
{ "firstName": "Chriss", "lastName": "Merry", "email": "merry@demo.com" },
{ "firstName": "Peter", "lastName": "Andrew", "email": "andrew@demo.com" },
{ "firstName": "Loosy", "lastName": "Mally", "email": "mally@demo.com" },
{ "firstName": "John", "lastName": "Goray", "email": "goray@demo.com" }
];
$scope.selectEmployee = function (employee) {
$scope.selectedEmployee = employee; //model to use in Edit Form
}
this.saveEmployee = function (contactToUpdate) {
$scope.selectedEmployee.firstName = contactToUpdate.FirstName
}
});
You have a table which is showing the list of records and above the table you have a form through which you can edit the first name of any record. First you have to select the record, the first name of the record will be displayed in the textbox and then you have to edit the name then click on save button , finally it gets saved.
But the problem here is when you start typing in the textbox that will get updated in the table at the same time.
Using angular.copy to solve the issue:
So in order to fix this issue you have to make a copy of the selected employee and you need to pass that object to your Edit Form. This can de done as belowChange your html so that you use the new copied object in Edit Form
<form> <input type="text" ng-model="employeeCopy.firstName"/> <button ng-click="saveEmployee(employeeCopy)">Save</button> </form>
Now change your javascript to:
$scope.selectEmployee = function (employee) {
$scope.selectedEmployee = employee;
$scope.employeeCopy = angular.copy(employee);
}
this.saveEmployee = function (employeeCopy) {
$scope.selectedEmployee.firstName = employeeCopy.firstName;
}
Now as your table's employee object and Edit form's employee object are different. It will get updated only after clicking on save button.
This is the use of angular.copy.
Hope it helps.
For more posts on angularjs please refer: AngularJS
nice post ranadheer mamaiah
ReplyDelete