Angularfire:删除项目

时间:2016-01-30 18:24:16

标签: javascript angularjs firebase

好的,所以我有一个angularfire应用程序将文本条目发送到firebase,但是我在编写函数时无法从firebase中删除它们。

这是我的HTML

<button class="btn btn-secondary" ng-click="deleteAll()">Remove All</button>

  <ul class="messages">
    <li ng-repeat="item in list" class="item panel">
      <h3>{{item.name}}</h3>
      <p>{{item.message}}</p>
      <button class="btn" ng-click="deleteThis()">Delete</button>
    </li>
  </ul>

deleteThis用于删除按钮所附加的单个项目,deleteAll用于删除所有项目。

var myApp = angular.module("myApp",["firebase"]);

myApp.controller("SampleCtrl", function($scope, $firebaseArray) {

  var list = $firebaseArray(new Firebase("https://writeup.firebaseio.com/"));

  $scope.list = list;

  $scope.submit = function(){
    var name = document.getElementById("name").value,
        message = document.getElementById("message").value;

            list.$add({ name: name, message: message }).then(function(ref) {
          var id = ref.key();
          list.$indexFor(id);
        });
  }

  $scope.deleteAll = function(){
    $scope.id.$remove();
  };

  $scope.deleteThis = function(id, name, message){
    $scope.list.$remove(id);
  }

});

2 个答案:

答案 0 :(得分:3)

在HTML中将项目作为参数传递给deleteThis函数。

  <ul class="messages">
    <li ng-repeat="item in list" class="item panel">
      <h3>{{item.name}}</h3>
      <p>{{item.message}}</p>
      <button class="btn" ng-click="deleteThis(item)">Delete</button>
    </li>
  </ul>

在你的控制器中使用参数。

$scope.deleteThis = function(item){
    $scope.list.$remove(item);
};

来自文档:

  

$删除(recordOrIndex)

     

从数据库和本地阵列中删除记录。此方法返回在服务器上删除记录后解析的promise。它将包含对已删除记录的Firebase引用。它接受数组索引或对数组中存在的项的引用。

- AngularFire API Reference - $remove

答案 1 :(得分:1)

您无法通过ID删除记录,只能通过索引或将整个项目传递到$remove()

解决方案是首先查找索引并将其传递到$remove()

$scope.list.$remove($scope.list.$indexFor(id))