Pregunta

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.

¿Fue útil?

Solución

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!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top