Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I filter ng-repeat with the $odd or $even properties?

Tags:

I am trying to auto filter an ng-repeat list by even index. Is it possible to do this somehow? Here's what I am trying but it isn't working:

<div data-ng-repeat="thing in things | filter:$even" >      <div>{{thing.name}}</div> </div> 

Is there a proper way of achieving this?

like image 432
Subtubes Avatar asked Dec 20 '13 01:12

Subtubes


People also ask

How do I filter data in ng-repeat?

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.

How do I get an index value in ng-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

What is the use of NG-repeat?

Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

Which built in AngularJS Boolean variables can be used to determine if the index of an iteration is odd or even?

You can also use ng-class-even and ng-class-odd.


2 Answers

This will show $even names of the things list.

<div ng-repeat="thing in things" ng-if="$even">     {{thing.name}} </div> 
like image 51
Humberto Morera Avatar answered Sep 29 '22 10:09

Humberto Morera


Updated:

Or write a predicate function: Working exmaple
Docs: ngRepeat

HTML:

<div data-ng-repeat="thing in things | filter:filterEvenStartFrom(0)">     <div>{{thing.name}}}</div> </div> 

JS:

$scope.filterEvenStartFrom = function (index) {     return function (item) {         return index++ % 2 == 1;     }; }; 

Original:

How about this:

<div data-ng-repeat="thing in things" ng-hide="$even">      <div>{{thing.name}}}</div> </div> 
like image 35
Banana-In-Black Avatar answered Sep 29 '22 12:09

Banana-In-Black