vendredi 13 mai 2016

splitting ng-repeat into 2 rows and repeating the same for all the data (using bootstrap grids)

Need to create this pattern in html dynamically ie. if I repeat var a = [1,2,3,4,5,6,7,8,9,10,11,12];

I need to get this output using angularjs and bootstrap grid

1 2
3 4 5
6 7
8 9 10
11 12

basic structure i can think of is this, with some repeat logic.

<div class="container" ng-repeat="item in itemsList">
  <div class="group">
    <!-- need to repeat this pattern as long as there is data  -->
    <div class="row two-element-row">
      <div class="col-md-6">
        
        <!-- need 2 elements here -->
      </div>
    </div>
    <div class="row three-element-row">
      <div class="col-md-4">
        
        <!-- need next 3 elements here -->
      </div>
    </div>
  </div>
</div>

I dont want to model the data in JS preferably. I have a simple logic to create chunks of data of the incoming data and divide it into this pattern and then render the data, but that isnt what i want to do. Is there any pure angular way to do this? If there is any quick fix too , it would be great!

Aucun commentaire:

Enregistrer un commentaire