CODEWITHSUNDEEP
javascriptjqueryarraysangularjs
Atlas91
Atlas91

Reputation: 5904

Remove array value if already exists javascript

I've got an array of values that i show with an ng-repeat. When i click over one of it, i add this value in another array. If already exists i remove it. It works well here. But i have a button that push all array in the second. It's working but i can push the whole array infite times even if a value already exists. Of course, if i check one or two value and then i push "Select all" it must select all values also the values already select with the single selection. By thge way this is the code with a jsfiddle:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.all_titles = [
        "Title 1",
        "Title 2",
        "Title 3",
        "Title 4"
        ];

    $scope.selection=[];

    $scope.getSelectedItem = function getSelectedItems(title) {
            var idx = $scope.selection.indexOf(title);
            // is currently selected
            if (idx > -1) {
                $scope.selection.splice(idx, 1);
            }
            // is newly selected
            else {
                if(Array.isArray(title)) {
                    for(var i=0;i<title.length;i++) {
                        $scope.selection.push(title[i]);
                    }
                } else {
                    $scope.selection.push(title);
                }
            }
        };
}

<div ng-controller="MyCtrl">
    <div>
        <button data-ng-click="getSelectedItem(all_titles)">
            Select all
        </button>
    </div>
    <div ng-repeat="title in all_titles">
        <a ng-click="getSelectedItem(title)">{{title}}</a>
    </div>

    <hr>
    <div>
        {{selection}}
    </div>
</div>

http://jsfiddle.net/HB7LU/20342/

Upvotes: 0

Views: 2219

Answers (3)

Alexander
Alexander

Reputation: 7832

Netzach is right concerning the bug.

Also I would optimise your code by using hash instead of looping over the array. Then the code excluding/including the value will look like:

    if($scope.selection[title]){
        delete $scope.selection[title];
    } else {
        $scope.selection[title] = true;
    }

Here is jsfiddle to a working example:

http://jsfiddle.net/HB7LU/20348/

Upvotes: 0

Netzach
Netzach

Reputation: 321

Your code is work, but you need to create a else

for(var i=0;i<title.length;i++) {
 var n_idx = $scope.selection.indexOf(title[i]);
 if( n_idx == -1){
   $scope.selection.push(title[i]);
 }else{
   $scope.selection.splice(n_idx, 1);
 }
}


var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.all_titles = [
        "Title 1",
        "Title 2",
        "Title 3",
        "Title 4"
        ];

    $scope.selection=[];

    $scope.getSelectedItem = function getSelectedItems(title) {
            var idx = $scope.selection.indexOf(title);
            // is currently selected
            if (idx > -1) {
                $scope.selection.splice(idx, 1);
            }
            // is newly selected
            else {
                if(Array.isArray(title)) {
                    console.log("YES");
                    for(var i=0;i<title.length;i++) {
                        var n_idx = $scope.selection.indexOf(title[i]);
                        if( n_idx == -1){
                            $scope.selection.push(title[i]);
                        }else{
                            $scope.selection.splice(n_idx, 1);
                        }
                    }
                } else {
                    $scope.selection.push(title);
                }
            }
        };
}

Upvotes: 0

Philipp Sander
Philipp Sander

Reputation: 10249

You scenario is not quite clear to me.

If you want the select all button to behave like all links are click, then this is your solution:

$scope.getSelectedItem = function getSelectedItems(title) {
            if(Array.isArray(title)) {
                for(var i=0;i<title.length;i++) {
                    $scope.pushIt(title[i]);
                }
            } else {
                $scope.pushIt(title);
            }

    };

$scope.pushIt = function pushIt(title) {
        var idx = $scope.selection.indexOf(title);
        // remove if already in array
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        } else {
            $scope.selection.push(title);
        }
    };

If you want the select all button to add the remaining items, then this is your solution:

$scope.getSelectedItem = function getSelectedItems(title) {

    if (Array.isArray(title)) {
        for (var i = 0; i < title.length; i++) {
            var idx = $scope.selection.indexOf(title[i]);
            // don't add if already in the array
            if (idx == -1) {
                $scope.selection.push(title[i]);
            }
        }
    } else {
        var idx = $scope.selection.indexOf(title);
        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        } else {
            $scope.selection.push(title);
        }
    }

};

Upvotes: 2

Related Questions