CODEWITHSUNDEEP
javascriptjqueryangularjs
Atul Sharma
Atul Sharma

Reputation: 10675

use ng-repeat to show 2 elements in one go

I'm required to create something like this 

<div class="row">
  <div class="col">
  <div class="col">
<div>

Now i have array having 6 elements.. So, i need to create something like this.

<div class="row">
  <div class="col"> 1 </div>
  <div class="col"> 2 </div>
<div>
<div class="row">
   <div class="col"> 3 </div>
   <div class="col"> 4 </div>
<div>
<div class="row">
   <div class="col"> 5 </div>
   <div class="col"> 6 </div>
<div>

I'm not getting how to do this.. What i had tried.. 

<div class="row" ng-repeat="a in elem">
      <div class="col"> {{a.name}} </div>
      <div class="col"> {{a.name}} </div>
<div>

but, this is giving same values..in both ..

Upvotes: 3

Views: 791

Answers (2)

baskin
baskin

Reputation: 139

Updated

    <div class="row" ng-repeat="a in elem" ng-if="$even">
        <div class="col"> {{elem[$index - 1].name}} </div>
        <div class="col"> {{a.name}} </div>
    <div>

Upvotes: 1

Christoph
Christoph

Reputation: 1630

Instead of trying to do some hack with angular you could use flexbox:

* {
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 50%;
  height: 40px;
  padding: 8px;
}
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
  <div class="col">Col 4</div>
  <div class="col">Col 5</div>
  <div class="col">Col 6</div>
</div>

It has the advantage that you can make a responsive design much easier than with a fixed number of columns with angular.

Upvotes: 3

Related Questions