2015-02-24 88 views
1

我正在使用Angularfire,我想通過複選框刪除項目。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」按鈕的工作。

如果有人能告訴我你的答案,我將不勝感激。

回答

2

這裏是函數,你需要檢查/取消和刪除項目:

$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

我加checked屬性ngModel指令。

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> 
+0

哇,非常感謝。我從來沒有想過'檢查'屬性。它使事情變得簡單。 – Doreen 2015-02-24 08:52:30

+0

嗨,我想知道如果我想將按鈕checkAll()和按鈕'uncheckAll()'組合到一個複選框中,我該怎麼辦? – Doreen 2015-02-24 09:49:24

+0

我設置了一個簡單的例子:http://plnkr.co/edit/m3m5EjQHLMK0IUE3htLU?p=info – dfsq 2015-02-24 10:38:53