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

Я хочу использовать ng-repeat в Angular, в то время как я хочу вывести только некоторые элементы массива. Пример:

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

однако, это не работает. Скажите, пожалуйста, как это сделать; выводите только точный индекс элементов.

26
angularjs javascript ng-repeat

6 ответов

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

вместо этого вы можете использовать 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>
40

создать пользовательское фильтр, например:

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/

16

что вам нужно сделать, это найти индекс "item" в $scope.предметы. Смотрите ниже

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>

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

8

все предыдущие ответы будут работать, но если вы хотите использовать фильтр, вы также можете определить его самостоятельно, как в этой скрипке: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'

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

удачи

++

2

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

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;
}
1

альтернативный подход к решению этого создает новый "список" (я не знаю правильного термина в этом контексте) в 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 обертывание второй половины предотвращает отображение базового текста, когда предыдущий элемент является последним элементом списка.

0