Best way to list 2 elements per row with ng-repeat in angular?

Question

I have an array of objects, and I want to display 2 for each row, using ng-repeat.

The solution I came up with is the following:

 <div ng-repeat="element in elements">
      <div layout="row" ng-if="$even">
        <div flex>
          <span>{{ elements[$index].name }}</span>
        </div>
        <div flex>
          <span>{{ elements[$index+1].name }}</span>     
        </div>
      </div>
</div>

The problem is that with this I am not able to filter the contents with | filter in the right way, since it would show the filtered elements and the following ones.

What's the best way to address the problem?

Sorry for my bad english, it's not my first language. Thank you in advance.

Answer 1

A good solution will be, as @Joshua Ohana said in the comments, to pre-process your array, and then use your solution.

A quick and dirty option (without pre-processing) based on your solution, will be to filter the array inside the span element:

<div ng-repeat="element in elements">
  <div layout="row" ng-if="$even">
    <div flex>
      <span>{{ (elements | filter:<yourFilterHere>)[$index].name }}</span>
    </div>
    <div flex>
      <span>{{ (elements | filter:<yourFilterHere>)[$index+1].name }}</span>     
    </div>
  </div>
</div>

but I like the pre-processing option better.