javascript - Angular 火 : Delete item(s)

Question

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

});

Answer 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>

在你的 Controller 中使用参数。

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

来自文档:

$remove(recordOrIndex)

Remove a record from the database and from the local array. This method returns a promise that resolves after the record is deleted at the server. It will contain a Firebase reference to the deleted record. It accepts either an array index or a reference to an item that exists in the array.

--AngularFire API Reference - $remove