Angularfire 通过复选框删除项目

Question

我正在使用 Angularfire，我想通过复选框删除项目。

还有一个按钮可以执行 "checkAll"，另一个按钮可以执行 "uncheckAll"

HTML

<div ng-app="app" ng-controller="Ctrl">
  <li ng-repeat="item in newslist">
    <input type="checkbox"> {{item.newsTitle}}
  </li>
  <br>
  <button ng-click="checkAll()">check all</button>
  <button ng-click="uncheckAll()">uncheck all</button>
  <button ng-click="newslist.$remove(item)">Remove</button>
</div>

JS

var app = angular.module("app", ["firebase"]);
app.value('newsURL', 'https://XXX.firebaseio.com/XXX/');
app.factory('newsFactory', function($firebase, newsURL) {
  return $firebase(new Firebase(newsURL)).$asArray();
});
app.controller('Ctrl', function($scope, $firebase, newsFactory) {
  $scope.newslist = newsFactory;
  $scope.checkAll = function() {

  };
  $scope.uncheckAll = function() {

  };
});

plunker here

我不知道如何通过复选框删除项目或如何使 "checkAll" 按钮起作用。

如果有人能告诉我您的答案，我将不胜感激。

Answer 1

这是您需要 check/uncheck 和删除项目的函数：

$scope.checkAll = function() {
    $scope.newslist.forEach(function(el) {
        el.checked = true;
        $scope.newslist.$save(el);
    });
};

$scope.uncheckAll = function() {
    $scope.newslist.forEach(function(el) {
        el.checked = false;
        $scope.newslist.$save(el);
    });
}

$scope.remove = function() {
    $scope.newslist.forEach(function(item) {
        if (item.checked) {
            $scope.newslist.$remove(item);
        }
    });
};

演示： http://plnkr.co/edit/GsGVsGGjNwW4i1kTOuko?p=preview

我为 ngModel 指令添加了 checked 属性。

HTML 变为：

<li ng-repeat="item in newslist">
    <input type="checkbox" ng-model="item.checked">{{item.newsTitle}}
</li>

<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="remove()">Remove</button>

Angularfire 通过复选框删除项目

Angularfire remove items by checkbox

angularjs

checkbox

firebase

angularfire

removeall