使用 angularFire 访问 ng-repeat 中的下一个和上一个项目答案

【问题标题】：Access next and prev items in ng-repeat using angularFire使用 angularFire 访问 ng-repeat 中的下一个和上一个项目
【发布时间】：2014-03-26 22:24:20
【问题描述】：

我正在使用 ng-repeat 和 angularFire 制作项目列表，我需要访问每个列表中的下一个和上一个项目。

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 返回的对象一起使用是行不通的

除了第一项应该有对最后一项的引用，最后一项对第一项。

我正在尝试制作某种轮播，如果您在第一个项目中单击上一个，它会转到最后一个项目，当您在最后一个项目中单击下一个时，它会转到第一个。

【问题讨论】：

你的第二把小提琴（类似代码）使用 angularFire 0.3；它已有一年多的历史，落后 5 个版本。
调用 orderByPriority 或 toArray（你的两个小提琴使用不同版本的 angularFire 和不同的 API）不会将 products 对象转换为数组。它会影响被迭代的对象/数组，据我所知，您无法直接从指令范围内访问。
@Kato 你知道将产品对象转换为控制器中的数组的方法吗？
您也可以使用过滤器：

标签： angularjs angularjs-ng-repeat angularfire

【解决方案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，感谢您指出版本问题！

【讨论】：