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 ..
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.