$firebaseArray move object from index to index - firebase

Question

Here I pull a list of transactions and I show them in an ion-list with show-reorder enabled
var ref = fb.child("/members/" + fbAuth.uid + "/accounts/" + $scope.AccountId + "/transactions/");
$scope.transactions = $firebaseArray(ref);
I have the following code to handle sorting
$scope.moveItem = function (transaction, fromIndex, toIndex) {
$scope.transactions.splice(fromIndex, 1);
$scope.transactions.splice(toIndex, 0, transaction);
};
I know I'm approaching this the wrong way from reading the docs here. However, I have not been able to find the way to sort items (transactions in my case) and save those changes back to Firebase. Can you help?
UPDATE
Based on Frank van Puffelen comments below, I'm adding additional info. Take the following transactions as an example. I pull the following transactions from Firebase and I order them by "customIndex". So if I "move" customindex: "5" (Starbucks transaction) between customindex: "1" (McDonalds) and customindex: "2" (Walmart)
{
"accounts": {"Checking":
{payee: "McDonalds", amount: "2.35", customindex: "1"}
{payee: "Walmart", amount: "78.12", customindex: "2"}
{payee: "CapitalOne", amount: "150.00", customindex: "3"}
{payee: "FootLocker", amount: "107.54", customindex: "4"}
{payee: "Starbucks", amount: "2.88", customindex: "5"}
}}
I should end up with the following data in Firebase:
{
"accounts": {"Checking":
{payee: "McDonalds", amount: "2.35", customindex: "1"}
{payee: "Starbucks", amount: "2.88", customindex: "2"}
{payee: "Walmart", amount: "78.12", customindex: "3"}
{payee: "CapitalOne", amount: "150.00", customindex: "4"}
{payee: "FootLocker", amount: "107.54", customindex: "5"}
}}
I hope this helps making it more clear and thank you in advanced for your help!

Answer 1

To order your items, leave it to Firebase. For example say that you want the transactions to be ordered on creation date, you could:
var ref = fb.child("members")
.child(fbAuth.uid)
.child("accounts")
.child($scope.AccountId)
.child("transactions")
.orderByChild("creationDate");
$scope.transactions = $firebaseArray(ref);
If that does not cover what you want, please update your question to be clearer on what you're trying to sort on. Right now, I have no clue what you're trying to sort on.
Update
I just noticed your update and that indeed clarifies what you're trying to accomplish.
In your first data snippet, the data is ordered by customindex. So you can retrieve them in that order by:
var ref = fb.child("members")
.child(fbAuth.uid)
.child("accounts")
.child($scope.AccountId)
.child("transactions")
.orderByChild("customindex");
$scope.transactions = $firebaseArray(ref);
In your last data snippet, the transactions are no longer ordered by any property. So when the user drags the Starbucks transaction from its last place and drops it in second place, you'll need to update the customindex property of all transactions after it. If you update those values, AngularFire will automatically ensure that the items are in the correct order in the $firebaseArray again.
Note that this requires updating 4 transactions, which may not be very efficient. Alternatively you can:
keep the transaction details (what you initially had) and the transaction order in separate nodes. That way you'll only have to update the transaction_order node.
keep some space between your initial indexes. So instead of [1,2,3,4,5], start with [10,20,30,40,50]. Then when the user moves Starbucks up between 20 and 30, you can simply update the Starbucks transaction's customindex to 25: [10,20,25,30,40,50]. This approach is a bit hacky, but is simpler to implement and will normally work pretty well.