How to delete multiple checked items from a list in angular

Question

I have the following string;

             $scope.Array="5678,9876,0988"

I am displaying it in my html as follows:

             <li ng-repeat="ArrayItem in Array.split(',')">
                    <input type="checkbox" >
                     {{Zip}}
             </li>

this displays all the string items separately along with a check box. I would like to know how to select multiple items from the list on the UI, and on the press of delete, delete these items from Array.

e.g. check 5678, 9876, and click Delete. The Array would now only have 0988.

Slava Utesinov · Accepted Answer · 2017-10-23 06:15:12Z

2

angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
    $scope.toDelete = {};
    $scope.Array="0988,9876,0988";
    
    $scope.delete = function(){      
      $scope.temp = $scope.Array.split(',');
      for(var prop in $scope.toDelete){        
        if($scope.toDelete[prop])
          $scope.temp[prop] = undefined;
      }      
      $scope.toDelete = {};
      $scope.Array = $scope.temp.filter(function(x){ return x !== undefined; }).join(',');
    }
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller="ctrl">
    <ul>
      <li ng-if='Array' ng-repeat="ArrayItem in Array.split(',') track by $index">
        <input type="checkbox" ng-model='toDelete[$index]'>{{ArrayItem}}
      </li>
    </ul>
    Array: {{Array | json}}
    <br>
    <input type='button' value='Delete' ng-click='delete()'/>
</div>

edited Oct 23, 2017 at 6:15

answered Oct 23, 2017 at 5:57

Slava Utesinov

13.5k2 gold badges21 silver badges26 bronze badges

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

1 Comment

Pares Over a year ago

That was what I was looking for!

Collectives™ on Stack Overflow

How to delete multiple checked items from a list in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related