Question

我使用ng-repeat和angularFire创建项目列表，我需要访问每个列表中的next和prev项目。

TLDR;

这段代码{{products[$index - 1].name}}它无法使用angularFire返回的对象

修改

我使用orderByPriority将对象转换为这样的数组ng-repeat='product in products | orderByPriority | startFrom:startFrom() | limitTo:pageSize'

我的产品列表看起来像

{
  "-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"
  },

}

我使用的代码如this，可以使用简单的javascript数组

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

但是尝试将similar code与angularFire返回的对象一起使用

此外，第一项应该引用最后一项和最后一项。

我尝试制作某种旋转木马，如果你在第一个项目中单击上一个，它会转到最后一个项目，当你在最后一个项目中单击下一个时，它会转到第一个项目。

Answer 1

我最终将Firebase对象转换为数组并在ng-repeat中使用该数组。

在咖啡中：

    $scope.myProducts = []

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

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

并使用：

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

用于下一个/上一个功能

@Kato，感谢您指出版本的问题！

使用angularFire访问ng-repeat中的next和prev项目

1 个答案: