Как использовать ng-repeat с фильтром и $index?

Ответ 1

В вашем коде фильтр применяется к массиву 'items', а не к каждому элементу массива, поэтому он не работает так, как вы ожидаете.

Вместо этого вы можете использовать ng-show (или ng-if):

<ul>
    <li ng-repeat="item in items" ng-show="$index % 3 == 0">{{item}}</li>
</ul>

Смотрите: http://jsfiddle.net/H7d26

EDIT: используйте директиву ng-if, если вы не хотите добавлять невидимые элементы dom:

<ul>
    <li ng-repeat="item in items" ng-if="$index % 3 == 0">{{item}}</li>
</ul>

Ответ 2

Создайте собственный фильтр, например:

filter('modulo', function(){
  return function (arr, div, val) {
      return arr.filter(function(item, index){
          return index % div === (val || 0);
      })
  };
});

Затем измените значение ng-repeat на:

<ul ng-repeat="item in items | modulo:3">

Или выберите фильтр (index % 3 === 1), например:

<ul ng-repeat="item in items | modulo:3:1"> 

http://jsfiddle.net/Tc34P/2/

Ответ 3

Что вам нужно сделать, это найти индекс "item" в $scope.items. См. Ниже

ng-repeat"item in items | filter:(items.indexOf(item)%3 == 0)

Итак, пример реального мира (для других, кто сталкивается с этим решением) будет.

<div ng-repeat="item in filtered = (items | filter:customfilter | orderBy:customsort)">
    <div> This is number {{items.indexOf(item)}} in the items list on the scope.</div>
</div>

Приведенный выше пример получит правильную позицию независимо от сортировки или фильтрации

Ответ 4

Все ответы на прецеденты будут работать, но если вы хотите использовать фильтр, вы также можете определить его самостоятельно, как в этой скрипте: http://jsfiddle.net/DotDotDot/58y7u/

.filter('myFilter', function(){
    return function(data, parameter){
        var filtered=[];
        for(var i=0;i<data.length;i++){
                if(i%parameter==0)
                    filtered.push(data[i]);
        }
        return filtered;
    }
});

а затем вызовите его следующим образом:

ng-repeat='item in items | myFilter:3'

(я добавил дополнительную сложность с параметром, если вы хотите быстро изменить его на четные числа)

Удачи

++

Ответ 5

Я предлагаю фильтрацию с помощью функции:

ng-repeat"item in filterItems(items)"

И на контроллере:

$scope.filterItems= function(items) {
    var result = {};
    angular.forEach(items, function(item) {
       // if item is something.. add to result
    });
    return result;
}

Ответ 6

Альтернативный подход к решению этого создает новый "список" (я не знаю подходящего термина в этом контексте) в ng-repeat. Затем этот новый список можно отнести к области

<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="friend in filteredFriends = ((friends | filter:q:strict) | orderBy:'age')" ng-if="$index % 2 == 0">
    [{{$index + 1}}] {{filteredFriends[$index].name}} who is {{filteredFriends[$index].age}} years old.
    <span ng-if="$index+1 < filteredFriends.length">[{{$index + 2}}] {{filteredFriends[$index+1].name}} who is {{filteredFriends[$index+1].age}} years old.</span>
  </li>
</ul>

ng-if на span обертывании второй половины предотвращает отображение базового текста, когда предыдущий элемент является последним элементом списка.