angular.copy() in AngularJs.

Saturday, October 5, 2013

angular.copy() in AngularJs.

How to use angular.copy()

We are all familiar that AngularJs is a model driven technology.Two way binding is one of the powerful techniques implemented in it.Changes done to the model are instantly reflected to its related properties on the Ui and vice-versa.Nice functionality.But it may be annoying in some exceptional scenarios.So let us see one of the scenarios in our common web applications.

Scenario:

We have a section on our page showing a list of employees with minimum details provided with select functionality.
On selecting a particular employee a new section shows up displaying the total details of the corresponding employee.
The new show up also contain buttons to edit and update the details.
The normal requirement will be ,when the details of a particular employee are edited the actual list should not get updated instantly but should be done only after clicking the update button.
But in this case instant changes will take place in the actual list on editing the full detail section.This happens due to two way binding concept in angularJs.But in this case it is not needed.

Inorder to overcome such problems angular js is provided with an excellent method called "angular.copy()".

Let us discuss in detail with some sample code for better clarity: 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 the following html code

 
 

    Angular copy example
    
        
            
            
        
        
            
                
                    Name
                    Email
                    Mobile
                    Address
                
            
            
                
                    {{emp.Name}}
                    {{emp.email}}

Name	Email	Mobile	Address
{{emp.Name}}	{{emp.email}}

And your javascript will be

var app = angular.module("app", []);  
app.controller("AppCtrl", function ($scope) {  
  $scope.employees = [  
          {"Name": "Sekhar", "mobile": "48635263469", "email": "sekhar@gmail.com"},  
          {"Name": "Abhi", "mobile": "455624512", "email": "abhi@gmail.com"},  
          {"Name": "Rani", "mobile": "6568568", "email": "rani@yahoo.com.com"},   
    ];  
  $scope.selectEmp = function (emp) {  
  $scope.selectedEmp = emp; // this is the model we use in Edit Form  
      }  
      this.saveEmp = function (empToUpdate) {  
          $scope.selectedEmp.Name =   empToUpdate.Name   
      }  
  });

When you implement the above code you will find that, whenever you try to edit the employee details you notice that the changes are reflected instaltly in the main list too.Inorde to overcome this we bring angula.copy() into picture.

Now using angular.copy() to the rescue:

Change your html and scripts to:
Design Page:

javascript file:

$scope.selectEmp = function (employee) {  
  $scope.selectedEmp = employee;  
          $scope.empCopy = angular.copy(employee);  
      }  
      this.saveEmp = function (empCopy) {  
  
        $scope.selectedEmp.Name = empCopy.Name;  
      }

Now you can find that we are taking a deep copy of the selected employee and using it as the secondary model to edit the contact without disturbing the our actual model.The edited model will be assigned to the actual model only when we press the update button.
In this way angular.copy() is quite handy in such situations.Hope this post helps you.