Question

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

所以例如我有

$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-app引导的代码片段

Answer 1

您应该使用Angular本机指令ng-checked

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

Answer 2

您可以使用过滤器：

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});
}

Demo Plunker

Answer 3

<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})
    }
})

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

3 个答案: