CODEWITHSUNDEEP
javascriptjqueryangularjsfilter
Dora
Dora

Reputation: 6970

how to delete object in an array with filter used? AngularJS

I have something like an input to add items into either column 1 or column 2 and each time adding the items, the column will show up what is added right away with an 'X' beside it so if you want to delete the item just click on 'X'. At first I wasn't thinking much so I used an easy way to remove the HTML but then I realized, that's just removing the HTML (There's also a search input if I type something into search and clear the search, all items will show again). This is when I realized just removing the HTML is a mistake that I need to remove the object too but how can I make it so it'll delete the right object in the array?

My angular script

angular.module("addItemApp", [])
    .controller("toDoCtrl", function ($scope) {
    $scope.items = [];
    $scope.addItem = function (item) {
        console.log(item);
        $scope.items.push(angular.copy(item));
        console.log($scope.items);
    };
    $scope.remove = function (item) {
        var index = $scope.items.indexOf(item);
        $scope.items.splice(index, 1);
    }
});

my html

<div class="row">
    <div class="col-xs-6 col-sm-4 left-column">
        <div class="input-item">
            <input type="text" placeholder="Enter Item" ng-model="item.name" class="enter-item">
            <select class="column-select" ng-model="item.pos">
                <option value="default" selected>Choose Column</option>
                <option value="column1">Column 1</option>
                <option value="column2">Column 2</option>
            </select>
            <button class="add-button" type="button" ng-click="addItem(item)">Add Item</button>
        </div>
        <div class="search-item">
            <label for="search">Search An Item</label>
            <div class="search-input">
                <input ng-model="query" type="text" placeholder="Search" id="search"><span class="fa fa-search icon-search"></span>

            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
         <h3 class="column-header column1">
              Column 1
         </h3>

        <ul ng-repeat="item in items | filter:{ pos: 'column1' } | filter:query">
            <li>{{item.name}}
                <button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
            </li>
        </ul>
    </div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
         <h3 class="column-header column2">
              Column 2
         </h3>

        <ul ng-repeat="item in items | filter:{ pos: 'column2' } | filter:query">
            <li>{{item.name}}
                <button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
            </li>
        </ul>
    </div>
</div>

Thanks in advance everyone.

Upvotes: 1

Views: 2230

Answers (2)

Captain Delano
Captain Delano

Reputation: 466

<button ng-click="remove(item)"></button>

should work, since item is defined earlier in the ng-repeat and you already have a remove function defined on your $scope.

Upvotes: 1

Rabi
Rabi

Reputation: 2220

you can do it in two ways -

1

$scope.remove = function(item) {
    var index = $scope.items.indexOf(item);
    $scope.items.splice(index, 1);
}

<button ng-click="remove(item)"></button>

2

$scope.remove = function(index) {
    $scope.items.splice(index, 1);
}

<button ng-click="remove($index)"></button>

Please note that, when filter is applied, the $index may not be the one you should use to remove, better go with first approach. I have given example of $index for your reference.

Upvotes: 4

Related Questions