如果选中，请从列表中删除项目

Remove item from the list if checked

本文关键字：列表 删除项目 如果      更新时间：2023-09-26

我有一个带复选框的项目列表，还有一个删除按钮。只有选中列表中的项目时，删除才有效。

例如，我有

$scope.list = [{
            name:'Groceries',
            check: false
        }, {
            name:'Laundry',
            check:false
        },
            {
             name:'Cleaning',
             check:false
            }];

在我的HTML 中

<ul>
   <li ng-repeat="values in list">
      <input type="checkbox" ng-model="values.check"/>
      <span>{{values.name}}</span> 
  </li>
</ul>
<button>Delete</button>

这只是我让控制器声明并用ng应用程序引导的代码片段

您应该使用Angular原生指令ng-checked

<input type="checkbox" ng-checked="values.check"/>

您可以为此使用过滤器：

HTML

  <body ng-app="app" ng-controller='Ctrl'> 
     <ul>
        <li ng-repeat="values in list">
           <input type="checkbox" ng-model="values.check"/>
           <span>{{values.name}}</span> 
        </li>
     </ul>
     <button ng-click="remove((list | filter:{check:true}))">Delete</button>
 </body>

控制器

$scope.remove = function(items) {
     alert('removing ' + items.length + ' items');
     $scope.list = $filter('filter')($scope.list, { check: false});
}

演示Plunker

<body ng-controller="MyController">
    <ul>
        <li ng-repeat="values in list">
            <input type="checkbox" ng-model="values.check" />
            <span>{{values.name}}</span>
        </li>
    </ul>
    <button ng-click="deleteItems()">Delete</button>
</body>

控制器：

myApp.controller('MyController', function($scope, $filter) {
    $scope.list = [ {
        name : 'Groceries',
        check : false
    }, {
        name : 'Laundry',
        check : false
    }, {
        name : 'Cleaning',
        check : false
    } ];
    $scope.deleteItems = function() {
        $scope.list = $filter('filter')($scope.list, {check : false})
    }
})
相关文章：