如何在不影响angularjs中其他$ scope值的情况下为对象设置标志？

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"
  }
];

Answer 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

Answer 2

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

Answer 3

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)