How to set flag for object without affect other $scope value in angularjs?

Question

Here I added sample for Move Items From One List to Another

While Am move the Item that time I need to set flag as 'D' for moving item from where I am moving and I need to set flag as 'A' for moved item. I tried but If I change the object both place it affected can any one help me on this...

for eg:- I tried to move Alpha left to right

In left side object:-

    $scope.items = [
  {
    "Key": 0,
    "Description": "Alpha",
    "flag": "D"
  },
  {
    "Key": 1,
    "Description": "Beta",
    "flag": "E"
  },
  {
    "Key": 2,
    "Description": "Gamma",
    "flag": "E"
  },
  {
    "Key": 3,
    "Description": "Delta",
    "flag": "E"
  },
  {
    "Key": 4,
    "Description": "Epsilon",
    "flag": "E"
  }
];

In Right side object:-

 $scope.items1 = [
  {
    "Key": 5,
    "Description": "Zeta",
    "flag": "E"
  },
  {
    "Key": 6,
    "Description": "Eta",
    "flag": "E"
  },
  {
    "Key": 0,
    "Description": "Alpha",
    "flag": "A"
  }
];

score 1 · Accepted Answer · answered Mar 21 '16 at 07:12

1

This is because you are pushing the same object into the other array while movement and the updates are occurring on the object reference, so making changes on object in one array is also updating the same object in the other array.

As per your described requirement, you must first create a copy of the object before pushing into the array while movement, so you can replace the code as below:

$scope.array1.push(item); with $scope.array1.push(angular.copy(item));

and

$scope.array.push(item); with $scope.array.push(angular.copy(item));

Here angular.copy creates a deep copy of the object.

Refer plnkr with above changes: http://plnkr.co/edit/at5x3hB9iq8DZCzpD5qP?p=preview

answered Mar 21 '16 at 07:12

Harpreet

1,527
13
25

Becareful the array keep growing with your exemple. You need to identify object without using indexOf because it changes. – JEY Mar 21 '16 at 07:17
Yeah, that I agree but it purely depends on the requirement how to handle that part, we can discard/remove the objects from array by marking them with some specific status but again it depends on requirements. – Harpreet Mar 21 '16 at 07:18

score 0 · Answer 2 · edited May 23 '17 at 12:07

You just update an object add the same reference to another array and update this reference. So the first update is discarded by the second.

In your case you need to clone the object before adding it to the other array. You will need to search them by a distinctive attribute like an id.

Take a look at this post for cloning object How do I correctly clone a JavaScript object? or you can use angular.copy

Patrick · Answer 3 · 2016-03-21T07:23:59.200

As others have explained it's because you are moving the same item between lists. A better solution would be to create a wrapper object. That way you don't need to copy the entire structure of each item, but instead only need to create a small "changeitem" that you add to your lists.

So instead of adding the items themselves, move the flag attribute to an outer class and use that in your arrays instead.

var oldItem = $scope.array[index];
oldItem.flag = 'D';
var changedItem = { flag: 'A', item: oldItem.item }
$scope.array1.push(changedItem)

How to set flag for object without affect other $scope value in angularjs?

3 Answers3