Access next and prev items in ng-repeat using angularFire

Question

I'm making a list of items using ng-repeat and angularFire, I need to access next and prev items in each list.

TLDR;

This piece of code {{products[$index - 1].name}} it's not working whit the object returned by angularFire

Edit:

I'm using orderByPriority to convert the object to an array like this ng-repeat='product in products | orderByPriority | startFrom:startFrom() | limitTo:pageSize'

My products list looks like

{
  "-JBfPahaB9FomJej6cyu" : {
    "price" : 400,
    "brand" : "Formica",
    "name" : "Wengue Tabaco",
    "code" : "0406",
    "img" : "0406.jpg"
  },
  "-JBfP0fPcjQi_pAd2mp0" : {
    "price" : 400,
    "brand" : "Formica",
    "name" : "Zebra",
    "code" : "0402",
    "img" : "0402.jpg"
  },
  "-JBfUWmLqWDNH7X0XW09" : {
    "price" : 400,
    "brand" : "Formica",
    "name" : "Perillo Mediterraneo",
    "code" : "0409",
    "img" : "1320.jpg"
  },
  "-JBfUySzDEv32FkSr62t" : {
    "price" : 400,
    "brand" : "Formica",
    "name" : "Peral",
    "code" : "0410",
    "img" : "0410.jpg"
  },
  "-JBfRTaShz2GNAjY9Fd2" : {
    "price" : 400,
    "brand" : "Formica",
    "name" : "Balsa Hindú",
    "code" : "0412",
    "img" : "0412.jpg"
  },

}

I'm using code like this which works with simple javascript array

<div ng-app="test-app" ng-controller="MyController">
    <ul id="contents">
      <li ng-repeat='product in products | orderByPriority | startFrom:startFrom() | limitTo:pageSize'>
          <div class="title">{{$index}} - {{product.name}} </div>
          <div>Prev: {{products[$index - 1].name}}</div>
          <div>Next: {{products[$index + 1].name}}</div>
      </li>
    </ul>
</div>

But trying to use similar code with the object returned by angularFire is not working

Besides the first item should have a reference to the last and the last item to the first.

I'm trying to make some kind of carousel when if you click previous in the first item it goes to the last item and when you click next in the last item it goes to the first.

Your second fiddle (similar code) uses angularFire 0.3; it's over a year old and 5 releases behind. — Kato
– Kato, Commented Mar 28, 2014 at 18:20
Calling orderByPriority or toArray (your two fiddles use different versions of angularFire with different APIs) does not convert the products object into an array. It affects the object/array being iterated, which you can't access directly from inside the directive scope, as far as I know. — Kato
– Kato, Commented Mar 28, 2014 at 18:27
@Kato Do you know a way to convert the products object into an array in a controller? — Cesar
– Cesar, Commented Apr 2, 2014 at 2:01

Cesar · Accepted Answer · 2014-04-02 04:00:10Z

0

I ended up transforming the Firebase object to an array and using that array in ng-repeat.

In coffee:

    $scope.myProducts = []

    $scope.products.$on 'loaded', ->
        $scope.keys = $scope.products.$getIndex()

        for j in $scope.keys
            $scope.myProducts.push $scope.products[j]

and using:

    data-target="#producto-{{myProducts[$index-1].code || myProducts[myProducts.length-1].code}}"
    data-target="#producto-{{myProducts[$index+1].code || myProducts[0].code}}"

for the next/prev functionality

@Kato, thanks for pointing out the issues with the versions!

answered Apr 2, 2014 at 4:00

Cesar

4,1668 gold badges47 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access next and prev items in ng-repeat using angularFire

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related