adding and removing items from one ng-repeat to another ng-repeat

Question

I have two ng-repeats

<p ng-repeat="Item in List | filter:{category:currentCategory.name} | orderBy:'name' track by Item.name ">
      <a ng-click="addItem(Item)"><span class="glyphicon glyphicon-plus"></span>
          {{Item.name}}
      </a>
</p>

<p ng-repeat="NewItem in NewList | orderBy:'name' track by NewItem.name">
   <a>{{NewItem .name}}</a>
   <a ng-click="returnItem(NewItem)"><span class="glyphicon glyphicon-trash"></span></a>
</p>

The I am having 2 issues one the item is List is not being deleted when it moves to NewList and the 2nd issue is that when I returnItem from NewList It doesnt delete the items associated with it....I.E. I try and delete the last item and it deletes the first item.

Here is my angular

$scope.addItem = function (Item) {
    $scope.NewList.push(Item);
    $scope.List.splice(Item , 1);
};

$scope.returnItem = function (NewItem) {
    $scope.List.push(NewItem);
    $scope.NewList.splice(NewItem, 1);
};

I am not using $index because it doesnt work at all when I filter the lists.

Any options or suggestions would be AWESOME! I am so stumped right now.

jcruz · Accepted Answer · 2014-09-11T02:51:58.510

0

You are not providing the Array.splice function the parameters that it expects.

The first parameter to Array.slice should be the index of the item you want to remove from the list. At the moment, you are providing it with the item you want to remove.

You should first find the index of the item you want to remove.

try something like this

$scope.NewList.push(Item);
var index = $scope.List.indexOf(Item);
if(index !== -1) $scope.List.splice(index , 1);

note: Array.indexOf does not work on arrays of objects. Since you do have an array of objects your going to have to iterate through the list(with a for loop), and compare the name property to find the index of the item you want to remove.

var index = -1;
for (var i = 0; i < $scope.List.length; i++) {
    if($scope.List[i].name === Item.name){
        index = i;
        break;
    }
}

edited Sep 11 '14 at 02:51

answered Sep 11 '14 at 00:46

jcruz

718
6
13

So splice only works on the index of an item?...if that is true is there another way to remove an item from a list? I will try this my fear is that with orderBy and Filter it will be messed up. – user3271518 Sep 11 '14 at 01:08
yes, splice expects the index of the item you want to remove so you are going to have to find the index of the item you want to remove. The filters you use in your ngRepeat will only change the HTML generated. It will not rearrange the items in your $scope.List – jcruz Sep 11 '14 at 01:12
Roger, so thats why your code basicly says if it doesnt == the name then loop(try again)....is there a more efficient way to display the information? I have a dropdown menu to filter the list which is the main reason I didnt just use track by $index and pass the $index – user3271518 Sep 11 '14 at 01:20
1

never had any problems using `indexOf` on arrays of objects in angular. Will also find numerous posts on SO using it such as http://stackoverflow.com/a/14250677/1175966 or http://stackoverflow.com/questions/15453979/how-do-i-delete-an-item-or-object-from-an-array-using-ng-click/15454424#15454424 – charlietfl Sep 11 '14 at 02:19
$scope.NewList.splice($scope.NewList.indexOf(NewItem), 1); is the answer! – user3271518 Sep 11 '14 at 02:28
@charlietfl You are correct. indexOf should work fine since the object in the list is the same object passed in the as a parameter... I was thinking that the parameter might not always be a reference but a serialized representation of the object. In that scenario, indexOf would fail but that's not the case here. indexOf will work just fine here. – jcruz Sep 11 '14 at 02:47
@user3271518 that's basically the answer I provided except I added a check to make sure the item was found. It's not really needed since the item should always be there but I added it just in case. Calling splice with -1 will cause items to be removed starting at the end of the list. – jcruz Sep 11 '14 at 02:58

adding and removing items from one ng-repeat to another ng-repeat

1 Answers1