从 Firebase 中移除项目答案

【问题标题】：Remove Item from Firebase从 Firebase 中移除项目
【发布时间】：2014-11-12 03:20:06
【问题描述】：

我正在尝试了解如何从我的 Firebase 中删除项目。我已经设置了一个函数 (createProvider) 来创建一个项目，但不知道如何删除一个项目。

HTML

<form role="form" name="createProviderForm">
    <input type="text" ng-model="title">
    <button type="submit" ng-click="createProvider()">Submit</button>
</form>

<div ng-repeat="provider in providers">
    <h3>{{ provider.title }}</h3>
    <button type="button" ng-click="removeProvider()">Remove</button>
  </div>
</div>

var rootRef = new Firebase(FBURL);
var providersRef = rootRef.child('providers');

$scope.newProvider = {};
$scope.providers = [];

providersRef.on('child_added', function(snapshot) {
  $timeout(function() {
    var snapshotVal = snapshot.val();
    console.log(snapshotVal);
    $scope.providers.push({
      title: snapshotVal.title
    });
  });
});

$scope.createProvider = function() {
  var newProvider = {
    title: $scope.title
  };
  providersRef.push(newProvider);
};

$scope.removeProvider = function() {

};

我已经创建了一个名为removeProvider 的函数，但不知道要在其中放入什么。我意识到我必须以某种方式定位特定项目，然后将其从列表中删除。我只是不确定如何。

对此的任何帮助将不胜感激。提前致谢！

【问题讨论】：

为什么不使用$firebase $asArray

标签： javascript angularjs firebase

【解决方案1】：

要从 Firebase 中删除一个项目，您需要知道它的 name()，当您调用 push() 向 Firebase 添加一个新项目时，它会自动为您生成。

因此您需要将名称绑定到范围：

$scope.providers.push({
  name: snapshot.name(),
  title: snapshotVal.title
});

然后，您将这个名称传递给您从 HTML 对 removeProvider 的调用：

<div ng-repeat="provider in providers">
    <h3>{{ provider.title }}</h3>
    <button type="button" ng-click="removeProvider(provider.name)">Remove</button>
</div>

并使用它在 Firebase 上调用 remove：

$scope.removeProvider = function(name) {
  providersRef.child(name).remove();
};

正如@SharpieOne 已经评论的那样，如果您使用 AngularFire 库（在这种情况下特别是它的 $asArray() 方法），则会自动为您处理这些和许多其他事情。

【讨论】：

我已经尝试了上述方法，但我收到了这个错误：Error: Firebase.child failed: First argument was an invalid path: "". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"。我已经加载了 AngularFire，所以我可能会尝试这样做。使用 AngularFire 执行此操作有什么好处吗？
您检查name 的值在removeProvider 中是什么？我的答案中的代码旨在回答您的问题“如何在我的 Angular 应用程序中删除 Firebase 项目？”。预计您需要进行一些调试工作。
对不起，我当时有点马。设法通过将providersRef.child(name) 记录到控制台来解决问题，以确保它针对的是正确的项目。关于 AngularFire 方法，有什么理由/好处为什么您会沿着这条路线而不是上面的答案中列出的路线走？
这两种方法都有好处：Firebase 的好人创建 AngularFire 是有充分理由的，但另一方面，我（个人意见）有时觉得它比使用 Firebase Web/JavaScript 更复杂直接API。在彻底研究firebase.com/docs/web/libraries/angular/guide.html之后，您必须自己决定。

【解决方案2】：

通过设置对象值为 null ypu 可以将其删除。试试下面的代码

$scope.removeProvider = function() {
      var newProvider = {
        title: null
      };
     providersRef.push(newProvider);

    };

【讨论】：

那行不通。此代码解析为providersRef.push().set({ title: null})，它将简单地创建一个新的提供程序，然后将其删除。