Splice from array works only in one order

Question

I have a little problem. I have a checkbox for showing div. I can choose from 6 different checkboxes to select which div I want to show.

When check checkboxes I show div and send to server checked name of div.

 $scope.savesGraphUserDetail = [];
    $scope.addRemoveUserChart = function(checked, value) {
      if (checked) {
        $scope.savesGraphUserDetail.push(value);

        var config = { headers: { "Content-Type": "application/x-www-form-urlencoded", "X-HTTP-Method-Override": "PUT" } };
        var data = {graphsConfig: $scope.savesGraphUserDetail};

        $http
        .post(serviceBase + "blabla", data, config)
          .success(function(data, status, headers, config) {
          })
          .error(function(data, status, header, config) {
          });
      }else {
        var index = $scope.savesGraphUserDetail.indexOf(value);
        $scope.savesGraphUserDetail.splice(index);

        var config = { headers: { "Content-Type": "application/x-www-form-urlencoded", "X-HTTP-Method-Override": "PUT" } };
        var data = {graphsConfig: $scope.savesGraphUserDetail};

        $http
          .post(serviceBase + "blabla", data, config)
          .success(function(data, status, headers, config) {
          })
          .error(function(data, status, header, config) {
          });
      }

And this is ok, but when I uncheck checkboxes I get a problem, because if I check in this order first click "A", second "C" and third "D" I push in my array like this

myArray = ["A", "C", "D"]

And if I uncheck in reverse order, first uncheck "D"

myArray = ["A", "C"]

second uncheck "C"

myArray = ["A"]

and last "A"

myArray = []

and this is perfect, but if I change order when unchecking checkboxes

myArray = ["A", "C", "D"]

if I first uncheck "C", my array remove "C" and "D", i get this

myArray = ["A"]

if I first uncheck "A", my array remove "A" and "C" and "D", I get this

myArray = []

How to remove an only unchecked item?

Answer 1

You need to specify the deleteCount of Array#splice , because without all elements starting with the actual index are deleted.

Parameters

deleteCount _Optional

An integer indicating the number of old array elements to remove. If deleteCount is 0, no elements are removed. In this case, you should specify at least one new element. If deleteCount is greater than the number of elements left in the array starting at start , then all of the elements through the end of the array will be deleted.

If deleteCount is omitted, or if its value is larger than array.length - start , then all of the elements beginning with start index on through the end of the array will be deleted.

$scope.savesGraphUserDetail.splice(index, 1);
//                                        ^

Answer 2

Your problem is that you are calling .splice() method with the index only, you need to sepecify 1 as second parameter, which is the number of items to be spliced, the deleteCount optional param.

var index = $scope.savesGraphUserDetail.indexOf(value);
$scope.savesGraphUserDetail.splice(index, 1);

Otherwise all of the elements beginning with start index on through the end of the array will be deleted, that's why "C" and "D" were deleted in your second try.

Documentation:

If you take a look at the .splice() MDN specification , you can see that: