Waldemar Waldemar - 2 years ago 74
HTML Question

Output <div> on condition

In AngularJS I'd like to output items devided by pairs. Like the following HTML markup:

<div class="group">
<div>item 1</div>
<div>item 2</div>
<div class="group">
<div>item 3</div>
<div>item 4</div>

In my repeater I've tried using ng-if="$index % 2 == 0". But I'm loosing div's on odd index. How should I write the condition to show that group div's once for two items?

Kld Kld
Answer Source

You can try something like this.

.group {
  border: 1px solid red;
  display: block;
  background-color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="" data-ng-init="products=['apple','orange','Peach','Strawberry','Banana','Blueberry']" class="">
    <div ng-repeat="product in products" ng-if="$index % 2 == 0" class="group">
        <div >{{products[$index]}}</div>
        <div >{{products[$index + 1]}}</div> 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download