Angular ng-repeat add bootstrap row every 3 or 4 cols

Question

I m looking for the right pattern to inject a bootstrap row class every each 3 columns  I need this because cols doesn t have a fixed hight  and I don t want to fix one   so it breaks my design     Here is my code     lt div ng-repeat  product in products  gt       lt div ng-if   index   3    0  class  row  gt           lt div class  col-sm-4   gt                           lt  div gt       lt  div gt   lt  div gt    But it does only display one product in each row  What I want as final result is     lt div class  row  gt       lt div class  col-sm4  gt       lt  div gt       lt div class  col-sm4  gt       lt  div gt       lt div class  col-sm4  gt       lt  div gt   lt  div gt   lt div class  row  gt       lt div class  col-sm4  gt       lt  div gt       lt div class  col-sm4  gt       lt  div gt       lt div class  col-sm4  gt       lt  div gt   lt  div gt    Can I achieve this with only ng-repeat pattern  without directive or controller    The docs introduce ng-repeat-start and ng-repeat-end but I can t figure out how to use it is this use case   I feel like this is something we often use in bootstrap templating     Thanks

User · Answer

Born Solutions its best one  just need a bit tweek to feet the needs  i had different responsive solutions and changed a bit   lt div ng-repeat  post in posts  gt       lt div class  vechicle-single col-lg-4 col-md-6 col-sm-12 col-xs-12  gt       lt  div gt       lt div class  clearfix visible-lg  ng-if    index   1    3    0  gt  lt  div gt       lt div class  clearfix visible-md  ng-if    index   1    2    0  gt  lt  div gt       lt div class  clearfix visible-sm  ng-if    index   1    1    0  gt  lt  div gt       lt div class  clearfix visible-xs  ng-if    index   1    1    0  gt  lt  div gt   lt  div gt

User · Answer

I did it only using boostrap  you must be very careful in the location of the row and the column  here is my example    x000D   x000D   lt section gt  x000D   lt div class  container  gt  x000D           lt div ng-app  myApp  gt  x000D           x000D                   lt div ng-controller  SubregionController  gt  x000D                       lt div class  row text-center  gt  x000D                           lt div class  col-md-4  ng-repeat  post in posts  gt  x000D                               lt div  gt  x000D                                   lt div gt   post title   lt  div gt  x000D                               lt  div gt  x000D                           lt  div gt  x000D                       x000D                       lt  div gt  x000D                   lt  div gt          x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt   x000D   x000D   lt  section gt  x000D   x000D   x000D

User · Answer

Just another little improvement about  Duncan answer and the others answers based on clearfix element  If you want to make the content clickable you will need a z-index   0 on it or clearfix will overlap the content and handle the click   This is the example not working  you can t see the cursor pointer and clicking will do nothing     lt div class  row  gt       lt div ng-repeat  product in products  gt           lt div class  clearfix  ng-if   index   3    0  gt  lt  div gt           lt div class  col-sm-4  style  cursor  pointer  ng-click  doSomething    gt               lt h2 gt   product title   lt  h2 gt           lt  div gt       lt  div gt   lt  div gt    While this is the fixed one    lt div class  row  gt       lt div ng-repeat-start  product in products  class  clearfix  ng-if   index   3    0  gt  lt  div gt       lt div ng-repeat-end class  col-sm-4  style  cursor  pointer  z-index  1  ng-click  doSomething    gt               lt h2 gt   product title   lt  h2 gt       lt  div gt   lt  div gt    I ve added z-index  1 to have the content raise over the clearfix and I ve removed the container div using instead ng-repeat-start and ng-repeat-end  available from AngularJS 1 2  because it made z-index not working   Hope this helps   Update  Plunker  http   plnkr co edit 4w5wZj

User · Answer

Little bit modification in  alpar  s solution   lt div data-ng-app    data-ng-init  products   A   B   C   D   E   F    G   H   I   J   K   L    class  container  gt       lt div ng-repeat  product in products  ng-if   index   6    0  class  row  gt           lt div class  col-xs-2  ng-repeat  idx in  0 1 2 3 4 5   gt            products idx  parent  index     lt  -- When this HTML is Big it s useful approach -- gt           lt  div gt       lt  div gt   lt  div gt    jsfiddle

User · Answer

Okay  this solution is far simpler than the ones already here  and allows different column widths for different device widths    lt div class  row  gt       lt div ng-repeat  image in images  gt           lt div class  col-xs-6 col-sm-4 col-md-3 col-lg-2  gt                  your content here              lt  div gt           lt div class  clearfix visible-lg  ng-if    index   1    6    0  gt  lt  div gt           lt div class  clearfix visible-md  ng-if    index   1    4    0  gt  lt  div gt           lt div class  clearfix visible-sm  ng-if    index   1    3    0  gt  lt  div gt           lt div class  clearfix visible-xs  ng-if    index   1    2    0  gt  lt  div gt       lt  div gt   lt  div gt    Note that the   6 part is supposed to equal the number of resulting columns  So if on the column element you have the class col-lg-2 there will be 6 columns  so use       6   This technique  excluding the ng-if  is actually documented here  Bootstrap docs

User · Answer

Thanks for your suggestions  you got me on the right way    Let s go for a complete explanation     By default AngularJS http get query returns an object So if you want to use  Ariel Array prototype chunk function you have first to transform object into an array  And then to use the chunk function IN YOUR CONTROLLER otherwise if used directly into ng-repeat  it will brings you to an infdig error  The final controller looks       Initialize products to empty list  scope products           Load products from config file  resource   json shoppinglist json   get function  data object           Transform object into array     var data array          for  var i in data object             if  typeof data object i       object   amp  amp  data object i  hasOwnProperty  name                 data array push data object i                           Chunk Array and apply scope      scope products   data array chunk 3          And HTML becomes     lt div class  row  ng-repeat  productrow in products  gt        lt div class  col-sm-4  ng-repeat  product in productrow  gt    On the other side  I decided to directly return an array    instead of an object    from my JSON file  This way  controller becomes  please note specific syntax isArray true            Initialize products to empty list       scope products               Load products from config file      resource   json shoppinglist json   query  method  GET   isArray true   function  data array                 scope products   data array chunk 3             HTML stay the same as above    OPTIMIZATION  Last question in suspense is   how to make it 100  AngularJS without extending javascript array with chunk function     if some people are interested in showing us if ng-repeat-start and ng-repeat-end are the way to go     I m curious     ANDREW S SOLUTION  Thanks to  Andrew  we now know adding a bootstrap clearfix class every three  or whatever number  element corrects display problem from differents block s height   So HTML becomes     lt div class  row  gt        lt div ng-repeat  product in products  gt            lt div ng-if   index   3    0  class  clearfix  gt  lt  div gt            lt div class  col-sm-4  gt  My product descrition with   product property     And your controller stays quite soft with removed chunck function        Initialize products to empty list           scope products                   Load products from config file          resource   json shoppinglist json   query  method  GET   isArray true   function  data array                           scope products   data array chunk 3                scope products   data array

User · Answer

i solved this using ng-class   lt div ng-repeat  item in items  gt       lt div ng-class     row     index   1    4    0    gt           lt div class  col-md-3  gt                item name            lt  div gt       lt  div gt   lt  div gt

User · Answer

The top voted answer  while effective  is not what I would consider to be the angular way  nor is it using bootstrap s own classes that are meant to deal with this situation  As  claies mentioned  the  clearfix class is meant for situations such as these  In my opinion  the cleanest implementation is as follows    lt div class  row  gt       lt div ng-repeat  product in products  gt           lt div class  clearfix  ng-if   index   3    0  gt  lt  div gt           lt div class  col-sm-4  gt               lt h2 gt   product title   lt  h2 gt           lt  div gt       lt  div gt   lt  div gt    This structure avoids messy indexing of the products array  allows for clean dot notation  and makes use of the clearfix class for its intended purpose

User · Answer

Update 2019 - Bootstrap 4  Since Bootstrap 3 used floats  it required clearfix resets every n  3 or 4  columns   col-   in the  row to prevent uneven wrapping of columns   Now that Bootstrap 4 uses flexbox  there is no longer a need to wrap columns in separate  row tags  or to insert extra divs to force cols to wrap every n columns    You can simply repeat all of the columns in a single  row container   For example 3 columns in each visual row is    lt div class  row  gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt        lt div class  col-4  gt     lt  div gt           repeat for number of items   lt  div gt    So for Bootstrap the ng-repeat is simply      lt div class  row  gt         lt div class  col-4  ng-repeat  item in items  gt                   item           lt  div gt     lt  div gt    Demo  https   www codeply com go Z3IjLRsJXX

User · Answer

I know it s a bit late but it still might help someone  I did it like this    lt div ng-repeat  product in products  ng-if   index   3    0  class  row  gt       lt div class  col-xs-4  gt   products  index    lt  div gt       lt div class  col-xs-4  ng-if  products length  gt    index   1   gt   products  index   1    lt  div gt       lt div class  col-xs-4  ng-if  products length  gt    index   2   gt   products  index   2    lt  div gt   lt  div gt    jsfiddle

User · Answer

The best way to apply a class is to use ng-class It can be used to apply classes based on some condition    lt div ng-repeat  product in products  gt      lt div ng-class  getRowClass  index   gt          lt div class  col-sm-4   gt              lt  -- your code -- gt          lt  div gt      lt  div gt      and then in your controller   scope getRowClass   function index       if index 3    0        return  row

User · Answer

You can do it without a directive but i m not sure it s the best way  To do this you must create array of array from the data you want to display in the table  and after that use 2 ng-repeat to iterate through the array   to create the array for display use this function like that products chunk 3   Array prototype chunk   function chunkSize        var array this      return    concat apply             array map function elem i                return i chunkSize         array slice i i chunkSize                          and then do something like that using 2 ng-repeat   lt div class  row  ng-repeat  row in products chunk 3   gt     lt div class  col-sm4  ng-repeat  item in row  gt        item      lt  div gt   lt  div gt

User · Answer

Based on Alpar solution  using only templates with anidated ng-repeat  Works with both full and partially empty rows    lt div data-ng-app    data-ng-init  products  soda   beer   water   milk   wine    class  container  gt       lt div ng-repeat  product in products  ng-if   index   3    0  class  row  gt           lt div class  col-xs-4               ng-repeat  product in products slice  index    index 3  gt  products length                products length    index 3    gt    product   lt  div gt       lt  div gt   lt  div gt    JSFiddle

User · Answer

While what you want to accomplish may be useful  there is another option which I believe you might be overlooking that is much more simple   You are correct  the Bootstrap tables act strangely when you have columns which are not fixed height   However  there is a bootstrap class created to combat this issue and perform responsive resets   simply create an empty  lt div class  clearfix  gt  lt  div gt  before the start of each new row to allow the floats to reset and the columns to return to their correct positions   here is a bootply

User · Answer

After combining many answers and suggestion here  this is my final answer  which works well with flex  which allows us to make columns with equal height  it also checks the last index  and you don t need to repeat the inner HTML  It doesn t use clearfix    lt div ng-repeat  prod in productsFiltered  products   filter myInputFilter   ng-if   index   3    0  class  row row-eq-height  gt       lt div ng-repeat  i in  0  1  2   ng-init  product   productsFiltered  parent  parent  index   i    ng-if   parent  index   i  lt  productsFiltered length  class  col-xs-4  gt           lt div class  col-xs-12  gt    product name    lt  div gt       lt  div gt   lt  div gt    It will output something like this    lt div class  row row-eq-height  gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt   lt  div gt   lt div class  row row-eq-height  gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt       lt div class  col-xs-4  gt           lt div class  col-xs-12  gt              Product Name          lt  div gt       lt  div gt   lt  div gt

User · Answer

Building on Alpar s answer  here s a more generalised way to split a single list of items into multiple containers  rows  columns  buckets  whatever     lt div class  row  ng-repeat  row in  0 1 2   gt     lt div class  col  ng-repeat  item in  ctrl items  ng-if   index   3    row  gt       lt span gt   item name   lt  span gt     lt  div gt   lt  div gt     for a list of 10 items  generates    lt div class  row  gt     lt div class  col  gt  lt span gt Item 1 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 4 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 7 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 10 lt  span gt  lt  div gt   lt  div gt    lt div class  row  gt     lt div class  col  gt  lt span gt Item 2 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 5 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 8 lt  span gt  lt  div gt   lt  div gt    lt div class  row  gt     lt div class  col  gt  lt span gt Item 3 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 6 lt  span gt  lt  div gt     lt div class  col  gt  lt span gt Item 9 lt  span gt  lt  div gt   lt  div gt     The number of containers can be quickly coded into a controller function   JS  ES6    scope rowList   function rows      return Array rows  fill   map  x i   gt i      scope rows   2    HTML   lt div class  row  ng-repeat  row in rowList rows   gt     lt div ng-repeat  item in  ctrl items  ng-if   index   rows    row  gt            This approach avoids duplicating the item markup   lt span gt   item name   lt  span gt  in this case  in the source template - not a huge win for a simple span  but for a more complex DOM structure  which I had  this helps keep the template DRY

User · Answer

This worked for me  no splicing or anything required   HTML   lt div class  row  ng-repeat  row in rows   track by  index  gt       lt div class  col-md-3  ng-repeat  item in items  ng-if  indexInRange  index  parent  index   gt  lt  div gt   lt  div gt    JavaScript  var columnsPerRow   4   scope rows   function       return new Array columnsPerRow       scope indexInRange   function columnIndex rowIndex      return columnIndex  gt    rowIndex   columnsPerRow   amp  amp  columnIndex  lt   rowIndex   columnsPerRow    columnsPerRow

User · Answer

I ve just made a solution of it working only in template  The solution is       lt span ng-repeat  gettingParentIndex in products  gt           lt div class  row  ng-if   index lt products length 2 1  gt      lt  -- 2 columns -- gt               lt span ng-repeat  product in products  gt                   lt div class  col-sm-6  ng-if   index gt  2  parent  index  amp  amp   index  lt   2   parent  index 1 -1  gt   lt  -- 2 columns -- gt                        product foo                    lt  div gt               lt  span gt           lt  div gt       lt  span gt    Point is using data twice  one is for an outside loop  Extra span tags will remain  but it depends on how you trade off   If it s a 3 column layout  it s going to be like       lt span ng-repeat  gettingParentIndex in products  gt           lt div class  row  ng-if   index lt products length 3 1  gt      lt  -- 3 columns -- gt               lt span ng-repeat  product in products  gt                   lt div class  col-sm-4  ng-if   index gt  3  parent  index  amp  amp   index  lt   3   parent  index 1 -1  gt   lt  -- 3 columns -- gt                        product foo                    lt  div gt               lt  span gt           lt  div gt       lt  span gt    Honestly I wanted   index lt Math ceil products length 3    Although it didn t work

[angularjs] Angular ng-repeat add bootstrap row every 3 or 4 cols

Examples related to angularjs

Examples related to twitter-bootstrap

Examples related to angularjs-ng-repeat

Examples related to ng-repeat