如何从角度列表中删除多个选中的项目

时间:2017-10-23 04:50:23

标签: angularjs arrays

我有以下字符串;

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

我在html中显示如下:

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

这将单独显示所有字符串项目以及复选框。我想知道如何从UI列表中选择多个项目,按删除操作,从数组中删除这些项目。

e.g。检查5678,9876,然后单击“删除”。数组现在只有0988。

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
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(',');
    }
}])
&#13;
<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>
&#13;
&#13;
&#13;