Angularfire：删除项目答案

【问题标题】：Angularfire: Delete item(s)Angularfire：删除项目
【发布时间】：2016-01-30 18:24:15
【问题描述】：

好的，所以我有一个 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);
  }

});

【问题讨论】：

您没有将任何内容传递给 deleteThis();不知道你怎么能期望它起作用。

标签： javascript angularjs firebase

【解决方案1】：

在您的 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);
};

来自文档：

$remove(recordOrIndex)

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

-- AngularFire API Reference - $remove

【讨论】：

【解决方案2】：

您不能通过 ID 删除记录，只能通过索引或将整个项目传递给 $remove()。

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

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

【讨论】：