Splice removing wrong object from ng-repeat in AngularJS

Question

I'm listing an array of names in my view like this:

<div class="checkbox col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
  <div class="checkboxinner">

    <button class="btn btn-staff form-control" 
            ng-show="!staff.chosen" 
            ng-click="pushStaff(staff)">
               {{staff.name}}
    </button> // visible when unselected, invisible when selected 

    <button class="btn btn-primary form-control" 
            ng-show="staff.chosen" 
            ng-click="unpushStaff(staff, $index)">
               {{staff.name}}
    </button> // visible when selected, invisible when unselected

  </div>
</div>

The first button triggers this function, adding the object into the array and being replaced with another button (different color, same content) that is supposed to act as a toggle. This function works perfectly.

$scope.paxlist = [];

$scope.pushStaff = function (staff) {
    staff.chosen = true;

    $scope.paxlist.push(
        {
            name: staff.name
        }
    );
    console.log($scope.paxlist);
};

Basically, when I click I add the object, when I click again, I remove it. Here's the remove function:

$scope.unpushStaff = function (staff, $index) {
    staff.chosen = false;

    var index=$scope.paxlist.indexOf(staff)
    $scope.paxlist.splice(index,1);   

    console.log($scope.paxlist);
}

My problem is that the unpushStaff() will indeed remove an item, but not the item I clicked to remove, but another one.

What am I missing?

Maybe the ng-show is messing with the $index?

I see paxlist in the controller and stafflist in the template. What is the connection between the 2? — deitch
– deitch, Commented Dec 1, 2014 at 18:31
@deitch in the template I list all the items from stafflist, I want to then be able to select some of them and add them to another array (paxlist). — Eric Mitjans
– Eric Mitjans, Commented Dec 1, 2014 at 18:35
Oh so the template is for picking from stafflist and adding/removing from a separate paxlist? What are you seeing when you do unpushStaff()? Which item is being removed? — deitch
– deitch, Commented Dec 1, 2014 at 18:36
For instance, I select a,b and c. Then I unselect b and paxlist will remain with [a, b] instead of [a,c] — Eric Mitjans
– Eric Mitjans, Commented Dec 1, 2014 at 18:41

deitch · Accepted Answer · 2014-12-01 18:41:19Z

3

Your staff entry in stafflist and the entry in paxlist are not identical. Based on your template below:

    <button class="btn btn-staff form-control" 
        ng-show="!staff.chosen" 
        ng-click="pushStaff(staff)">
           {{staff.name}}
    </button> // visible when unselected, invisible when selected

It is clear that each staff entry in stafflist is some sort of object that has at least one attribute name and another chosen.

When you push onto paxlist, you are creating a new object that looks like:

$scope.paxlist.push(
    {
        name: staff.name
    }
);

This is fine. But when you then come to remove it, you are looking for it by:

    var index=$scope.paxlist.indexOf(staff)

where staff is the object in stafflist! Of course, that object does not exist in paxlist - a separate object you derived above in paxlist.push() is - and so indexOf() is returning -1, leading splice() to remove the last item on paxlist.

answered Dec 1, 2014 at 18:41

deitch

14.8k15 gold badges75 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eric Mitjans Over a year ago

I actually was starting to think in the same direction. But how do I fix it??

deitch Over a year ago

A bunch of ways. The simplest is probably to push the actual object staff onto paxlist. If it is the actual object (not another object whose properties happen to match), then indexOf will work. Else you will need to search through it one by one (which is all indexOf does anyways). There are some nice tools for this in lodash

Eric Mitjans Over a year ago

Answers like this are the ones that make me actually learn something : )

deitch Over a year ago

So is figuring them out and writing them. That's actually why I spend my time on here. :-) Use it well.

Collectives™ on Stack Overflow

Splice removing wrong object from ng-repeat in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related