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.

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.

• javascript
• angularjs
• angularjs-ng-repeat

• How are you trying to use your filter that's causing a conflict? You could use a function to build your model which has pre-filtered pairs... then do bundledElement.name[0] ... bundledElement.name[1] – Joshua Ohana Commented Mar 29, 2015 at 12:45
• Yes, me to) I didn`t find another solution – user1561325 Commented Feb 13, 2016 at 12:49

5 Answers 5

A good solution will be, as @Joshua Ohana said in the ments, 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.

I think that instead of trying to show two elements per ng-repeat, you should try to find a way to achieve the same result without the extra plexity. You could do something like this:

<div ng-repeat="element in elements | filter">      
  <div layout="row" ng-if="$even">
    <div flex>
      <span>{{ element.name }}</span>
    </div>
  </div>
  <div flex ng-if="$odd">
    <span>{{ element.name }}</span>     
  </div>
</div>

I just started up with AngularJS about a 2 weeks about and I wasn't able to get a solid answer for this question. So I decided to tackle myself, this is what I came up with.

Below are two filters, nRange returns an array that contains a sequence incremented by n, that is limited by the numItems - numItems%n. Where range, returns an array of a linear sequence, started at 0. The filters can be thought of as helper functions, for the following AngularJS code.

/*
    Pre: [] | nRange:numItems:n
    Post:
        Ex.1:   [] | nRange:5:2 --> [0,2,4]
        Ex.1:   [] | nRange:5:3 --> [0,3]
 */
website.filter('nRange', function() {
  return function(input, numItems, n) {
    if(numItems == 0) {
        return null;
    }
    range = numItems - numItems%n;
    for(i = 0; i <= range-n; i += n) {
        input.push(i);
    }
    if(numItems%n != 0) {
        input.push(range);
    }
    return input;
  };
});
/*
    Pre: [] | range:numItems
    Post:
        Ex.1:   [] | range:5 --> [0,1,2,3,4]
        Ex.1:   [] | range:2 --> [0,1]
 */
website.filter('range', function() {
  return function(input, numItems) {
    for (var i=0; i<=numItems; i++) {
      input.push(i);
    }
    return input;
  };
});

The $scope contains the projects and the number of project per row projectCols. By defining projectCols, allows us to change the layout quickly and easily.

<div class="container">
    <div class="row" ng-repeat="i in [] | nRange:projects.length:projectCols">
        <div class="col-md-{{12/projectCols}} col-sm-12 col-xs-12" ng-repeat="j in [] | range:projectCols-1">
            <project-item ng-if="projects[i+j]" info="projects[i+j]"></project-item>
        </div>
    </div>
</div>

The following HTML utilizes the filters to populate a with project items. What the code does, is it uses nRange to count by a certain amount, in other words it's like a for loop with i+=n for the incrementation. Then range provides the sub-range, in total it can be thought of as the following:

for(i = 0; i < nRange; i+=n) {
    for(j = 0; i < range; i++) {
        if($scope.projects[i+j]) { // If the project exist
            // Display it in the view
        }
    }
}

All together this allows to have 2, 3, 4, or 6 projects per row.

I also created some css classes, to display the project properly.

.project {
    border: 1px solid gray;
    border-radius: 5px;
    background: whitesmoke;
}
.col-md-6 .project {
    margin: 30px;
    padding: 30px;
    height: 450px;
}
.col-md-4 .project {
    margin: 20px;
    padding: 20px;
    height: 400px;
}
.col-md-3 .project {
    margin: 10px;
    padding: 10px;
    height: 400px;
}
.col-md-2 .project {
    margin: 5px;
    padding: 5px;
    height: 400px;
}

Here is my repository for my website that contains my plete implementation.

https://github./arjo1203/website

Here is a live demo! http://www.jraraujo./

I would use the ng-repeat to display single list items in an unordered list, and then use CSS to style each li to be 50% of the container width (or 49% usually works more consistently), and make each li a an inline-block style so that they float up two on a line.

I'm working in Angular4 at the moment, so I can't switch gears to Angular1.x code, but here's a mockup in pure HTML that you can test and then if it looks like a solution to our problem modify your code accordingly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
  <link rel="stylesheet" href="./arraylist.css">

</head>
<body>

<ul class="array-list">
    <li>One Item</li>
    <li>Two Item</li>
    <li>Three Item</li>
    <li>Four Item</li>
    <li>Five Item</li>
    <li>Six Item</li>
    <li>Seven Item</li>
    <li>Eight Item</li>
</ul>

</body>
</html>

And the array list.css file:

ul.array-list {
    display: block;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 49%;
}

Your Angular code would look something like this:

<div ng-repeat="element in elements">
      <ul class="array-list">
        <li>
          {{ elements[$index].name }}
        </li>
      </ul>
</div>

This doesn't implement what I'm assuming was a dark/light grey row striping, but you can probably work out a way to style this, or not style it if that's not particularly important.

The important thing here is that because you're repeating single elements, when you filter some out, the elements below with automatically reflow to fill in the gaps and you won't get inconsistent UI as a result of some values being displayed because the element they're paired with matched the filter.

May go with CSS:

<div layout="row" style="flex-wrap:wrap;">
  <div layout="column" flex="50" ng-repeat="element in elements">

    <span>{{ elements.name }}</span>

  </div>
</div>