CODEWITHSUNDEEP
javascripthtmlangularjsforeachconditional-statements
Waldemar
Waldemar

Reputation: 5513

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>
<div class="group">
   <div>item 3</div>
   <div>item 4</div>
</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?

Upvotes: 0

Views: 56

Answers (2)

Kld
Kld

Reputation: 7068

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> 
    </div>
</div>

Upvotes: 1

Vivek Singh
Vivek Singh

Reputation: 169

Filter defined as:

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);

for (var i=0; i<total; i+=2) {
  input.push(i);
 }

return input;
 };
 });

With the repeat used like this:

<div class="group" ng-repeat="n in [] | range:100">
  <div>item {{n+1}}</div>
  <div>item {{n+2}}</div>
</div>

All you have to do is define the range of your ng-repeat.

Upvotes: 0

Related Questions