如何在ng-repeat中获取之前的条目?

I have a template in which I want to generate some HTML only if the current item has some different fields from the previous item. How can I access the previous item in an ng-repeat?

我有一个模板，只有当当前项与前一项有不同的字段时，我才希望在其中生成一些HTML。如何在ng-repeat中访问前面的条目?

4 个解决方案

#1

You can do something like

你可以做一些类似的事情

<div ng-app="test-app" ng-controller="MyController">
    <ul id="contents">
      <li ng-repeat="content in contents">
          <div class="title">{{$index}} - {{content.title}} - {{contents[$index - 1]}}</div>
      </li>
    </ul>
</div>

var app = angular.module('test-app', []);

app.controller('MyController', function($scope){
    $scope.contents=[{
        title: 'First'
    }, {
        title: 'Second'
    }, {
        title: 'Third'
    }]
})

Demo: Fiddle

演示:小提琴

Be careful: $index is for the directive array, which may be different than the scope array. Use an inline variable to access the correct array.

注意:$index用于指示数组，它可能与范围数组不同。使用内联变量访问正确的数组。

<li ng-repeat="content in (correctContents = (contents | orderBy:'id'))">
  {{ correctContents[$index - 1] }} is the prev element
</li>

If you filter or orderBy, contents[$index] != content.

如果您过滤或orderBy，内容[$index] !=内容。

#2

One way is to use the $index for targeting previous item:

一种方法是使用$索引来针对之前的项目:

HTML:

<div ng-repeat="item in items">
  <span>{{$index}}: </span>
  <span ng-show="items[$index-1].name=='Misko'" ng-bind="item.name"></span>
</div>

JS:

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.items = [
          {name: 'Misko'},
          {name: 'Igor'},
          {name: 'Vojta'}
        ];

      }
    ]
  );

Plunker

砰砰作响

#3

Why not using key from ng-repeat ? ($index seems tricky compared to key)

为什么不使用ng-repeat的key呢?(与key相比，$index似乎有点棘手)

<div ng-repeat="(key, item) in data">
  <p>My previous item is {{ data[key-1] }}, my actual item is {{ item }}
</div>

#4

<li ng-repeat="item in items">
    {{items[$index - 1].att == item.att ? 'current same as previous' : 'current not same as previous'}}
</li>

#1