带有 AngularFire 0.5.0 的 AngularJS - $remove item 不起作用 [英] AngularJS with AngularFire 0.5.0 - $remove item doesn't work

问题描述

我只是想在我的第一个小 Angular 项目上做更多的工作，我将 AngularFire 从 0.3.0 更新到 0.5.0，但没有任何效果.我能够恢复数据库访问权限并将项目添加到我的列表中.但是删除功能不再起作用.在我更新 AngularFire 之前，我使用了 splice(index,1) 来删除一个项目.我也尝试使用 0.5.0 中的新 $remove 但它只是从列表中删除所有项目，即使我添加了一个键.

I just wanted to work more on my first little Angular project and I updated AngularFire from 0.3.0 to 0.5.0 and nothing really works anymore. I was able to get the database access back and also to add items to my list. But the remove function doesn't work anymore. Before I udpated AngularFire, I used splice(index,1) to remove an item. I also tried to use the new $remove from 0.5.0 but it just removes all items from the list, even I add a key.

重复我的列表:

<tr ng-repeat="(key, earning) in earnings | orderByPriority">
    <td>{{earning.date}}</td>
    <td>{{earning.description}}</td>
    <td>{{earning.price}} €</td>
    <td>
      <button class="btn btn-danger" ng-click="removeEarning(key)">
        Löschen
      </button>
    </td>

如您所见，它只是创建了一个带有数据的 tr，并且每个项目都有一个删除按钮.当我点击特定项目上的删除按钮时，只应删除此项，而不是从列表中删除所有内容.

As you can see, it just creates a tr with data and each item has a delete button. When I click the delete button on a specific item, only this should be removed and not all from the list.

我现在的 JS 代码:

My JS code now:

function BalanceCtrl($scope, $log, $http, $firebase) {
    var dbEarnings = new Firebase('https://*******.firebaseio.com/Earnings');
    $scope.earnings = $firebase(dbEarnings);

    $scope.addEarning = function() {
        $scope.earnings.$add({date:$scope.FormEarningDate,  description:$scope.FormEarningDescription, price:$scope.FormEarningPrice});    
        $scope.FormEarningDate = '';
        $scope.FormEarningDescription = '';
        $scope.FormEarningPrice = '';
        $scope.updateEarning();}

        $scope.removeEarning = function (key) {
            $scope.earnings.$remove(key);   
        }

仅从列表中删除特定项目是行不通的.在 0.3.0 中一切正常.有人知道我能做什么吗?

It doesn't work somehow to remove only the specific item from the list. It all worked fine with 0.3.0. Does anybody know what I can do?

推荐答案

orderByPriority 过滤器将集合转换为数组，导致 key 变成数字索引 (0, 1, 2, ...)——它不再是 Firebase 的名称.

The orderByPriority filter converts the collection to an array, causing key to become a numeric index (0, 1, 2, …)—it's no longer the Firebase name.

来自http://angularfire.com/documentation.html:

AngularFire 提供的 orderByPriority 过滤器用于转换$firebase 返回的对象到数组中.数组中的对象按优先级排序(如 Firebase 中所定义).此外，每个数组中的对象将定义一个 $id 属性，它将对应于该对象的键名.

The orderByPriority filter is provided by AngularFire to convert an object returned by $firebase into an array. The objects in the array are ordered by priority (as defined in Firebase). Additionally, each object in the array will have a $id property defined on it, which will correspond to the key name for that object.

所以使用 removeEarning(earning.$id).

参见 http://plnkr.co/edit/pJf2drPwhFAVCuaBSPHq?p=preview.

这篇关于带有 AngularFire 0.5.0 的 AngularJS - $remove item 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！