2013-03-14 4 views
42

У меня есть шаблон, в котором я хочу сгенерировать некоторый HTML, только если текущий элемент имеет несколько полей из предыдущего элемента. Как я могу получить доступ к предыдущему элементу в ng-repeat?Как получить предыдущий элемент в ng-repeat?

ответ

87

Вы можете сделать что-то вроде

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

JS

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

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

Демонстрация: Fiddle


быть осторожным:$index для массива директивы, которая может отличаться от массива области видимости. Используйте встроенную переменную для доступа к правильному массиву.

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

Если фильтр или OrderBy, contents[$index] != content.

+2

Но если у меня есть фильтр в нг-повтора, коллекции будут иметь различия. Есть идеи? – VadimAlekseev

+21

@VadimAlekseev Вы можете сделать что-то подобное, чтобы ссылаться на ваши отфильтрованные данные: 'ng-repeat =" item in (filterData = (data | filter: term)) "и делать как в ответе @ arun-p-johny с 'filterData [$ index-1]' вместо 'contents [$ index-1]' – jpmorin

+0

Моя коллекция - это словарь, я не могу получить доступ к элементам по индексу, есть ли способ сделать это? : S –

9

Один из способов заключается в использовании $ индекс для таргетинга предыдущий пункт:

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

5

Почему бы не использовать key от ng-repeat? ($index кажется сложным по сравнению с key)

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