2

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">
        {{item}}
        <!-- need 2 elements here -->
      </div>
    </div>
    <div class="row three-element-row">
      <div class="col-md-4">
        {{item}}
        <!-- 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!

dbugger
  • 15,868
  • 9
  • 31
  • 33
Nikhil Sikka
  • 108
  • 8
  • see if this helps: http://stackoverflow.com/questions/17448100/how-to-split-a-string-with-angularjs – Sajal May 13 '16 at 09:56
  • @Dev-One unfortunately no. This is gonna require some further processing as i dont have a finite set of data. I cant manage each row individually. _Thanks for showing me a cool new way to handle ng repeat though!_ – Nikhil Sikka May 13 '16 at 10:22
  • I am not sure if angular is capable of handling split in the way you want. What you probably can do is to repeat items in a table/grid and use CSS to manage size of the alternating rows. – Sajal May 13 '16 at 10:38
  • Yeah that seems a viable option. But i just cant manage to come up with a robust logic for this pattern. (See the pattern i added) – Nikhil Sikka May 13 '16 at 11:20

0 Answers0