AngularJS with AngularFire 0.5.0 - $remove item doesn't work

Question

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.

Thats my list repeat:

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

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.

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);   
        }

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?

That seems to correct code and $remove works as expected in this example: plnkr.co/edit/dFQmxUtIbKlhjiW1WV1X?p=preview - can you double check that the value of 'key' is correct? — Anant

Trevor Dixon Trevor Dixon · Accepted Answer · 2014-01-09T15:49:28

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.

From http://angularfire.com/documentation.html:

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.

So use removeEarning(earning.$id).

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

AngularJS with AngularFire 0.5.0 - $remove item doesn't work

1 Answers