javascript - 从 Firebase 中删除项目

Question

我想了解如何从我的 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>

JS

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 的函数，但不知道要在其中放入什么。我意识到我必须以某种方式定位特定项目，然后将其从列表中删除。我只是不确定如何。

如有任何帮助，我们将不胜感激。提前致谢!

Answer 1

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

因此您需要将名称绑定(bind)到作用域:

$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() 方法)，这个和许多其他事情会自动为您处理。