how to split the ng-repeat data with three columns using bootstrap

Question

I am using ng-repeat with my code I have  n  number of text box based on ng-repeat  I want to align the textbox with three columns   this is my code   lt div class  control-group  ng-repeat  oneExt in configAddr ext  gt         index 1          lt input type  text  name  macAdr   index 1                id  macAddress  ng-model  oneExt newValue  value     gt   lt  div gt

User · Answer

This solution is very simple   JSON     id  1  name  testA    id  2  name  test B    id  3  name  test C    id  4  name  test D    id  5  name  test E      HTML    lt div ng-controller  MyCtrl  gt     lt table gt       lt tr ng-repeat  item in items  ng-switch on   index   3  gt         lt td ng-switch-when  0  gt            items  index  id     items  index  name          lt  td gt         lt td ng-switch-when  0  gt           lt span ng-show  items  index 1   gt              items  index 1  id     items  index 1  name            lt  span gt         lt  td gt         lt td ng-switch-when  0  gt           lt span ng-show  items  index 2   gt                  items  index 2  id     items  index 2  name            lt  span gt         lt  td gt       lt  tr gt     lt  table gt   lt  div gt    DEMO in FIDDLE

User · Answer

Here s an easy-hacky way of doing it  It s more manual and ends up with messy markup  I do not recommend this  but there are situations where this might be useful   Here s a fiddle link http   jsfiddle net m0nk3y 9wcbpydq   HTML    lt div ng-controller  myController  gt       lt div class  row  gt           lt div class  col-sm-4  gt               lt div class  well  gt                   lt div ng-repeat  person in people   data   limitTo Math ceil data length 3   gt                     person name                     lt  div gt               lt  div gt           lt  div gt           lt div class  col-sm-4  gt               lt div class  well  gt                   lt div ng-repeat  person in people   data   limitTo Math ceil data length 3  Math ceil data length 3   gt                     person name                     lt  div gt               lt  div gt           lt  div gt           lt div class  col-sm-4  gt               lt div class  well  gt                   lt div ng-repeat  person in people   data   limitTo Math ceil data length 3  Math ceil data length 3  2  gt                     person name                     lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    JS   var app   angular module  myApp         app controller  myController   function  scope          scope Math   Math       scope data               name   Person A                             This setup requires us to use some Math on the markup     so you ll need to inject Math by adding this line   scope Math   Math

User · Answer

Just in case someone wants an Angular 7  and higher version  here is an example I used in one of my applications   HTML    x000D   x000D                      lt div class  container-fluid  gt  x000D                       lt div class  row   ngFor  let reports of chunkData  index as i  gt  x000D                           lt div  ngFor  let report of reports  class  col-4 col-sm-4  x000D                              style  border-style solid background-color  antiquewhite  gt   report   lt  div gt  x000D                       lt  div gt  x000D                   lt  div gt  x000D   x000D   x000D     TS FILE   x000D   x000D  export class ConfirmationPageComponent implements OnInit   x000D    chunkData       x000D    reportsArray     item 1    item 2    item 3    item 4    item 5    item 6    x000D     x000D    constructor      x000D   x000D    ngOnInit     x000D      this chunkData   this chunk this reportsArray  3   x000D      x000D   x000D    chunk arr  size    x000D      var newArr       x000D      for  var i   0  i  lt  arr length  i    size    x000D        newArr push arr slice i  i   size    x000D        x000D      return newArr  x000D      x000D    x000D   x000D   x000D    This is an awesome solution for dynamically creating new columns rows depending on how much items your iterating from the database   THanks

User · Answer

A clean  adaptable solution that does not require data manipulation   The HTML    lt div class  control-group  class  label      ng-repeat  oneExt in configAddr ext      ng-class    new-row   startNewRow  index  columnBreak     gt         index 1          lt input type  text  name  macAdr   index 1            id  macAddress   index    ng-model  oneExt newValue    gt   lt  div gt    The CSS    label       float  left      text-align  left     new-row       clear  left      The JavaScript    scope columnBreak   3    Max number of colunms  scope startNewRow   function  index  count        return   index    count      0       This is a simple solution for rendering data into rows and columns dynamically with no need to manipulate the array of data you are trying to display  Plus if you try resizing the browser window you can see the grid dynamically adapts to the size of the screen div    I also added an    index   suffix to your  id since ng-repeat will try to create multiple elements with the same id if you do not    A similar working example

User · Answer

All of these answers seem massively over engineered    By far the simplest method would be to set up the input divs in a col-md-4 column bootstrap  then bootstrap will automatically format it into 3 columns due to the 12 column nature of bootstrap    lt div class  col-md-12  gt       lt div class  control-group  ng-repeat  oneExt in configAddr ext  gt           lt div class  col-md-4  gt               lt input type  text  name  macAdr   index                       id  macAddress  ng-model  oneExt newValue  value      gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

My approach was a mixture of things   My objective was to have a grid adapting to the screen size  I wanted 3 columns for lg  2 columns for sm and md  and 1 column for xs   First  I created the following scope function  using angular  window service    scope findColNumberPerRow   function         var nCols      var width    window innerWidth       if  width  lt  768               xs         nCols   1            else if width  gt   768  amp  amp  width  lt  1200                sm and md          nCols   2       else if  width  gt   1200               lg         nCols   3            return nCols       Then  I used the class proposed by  Cumulo Nimbus    new-row       clear  left      In the div containing the ng-repeat  I added the resizable directive  as explained in this page  so that every time window is resized  angular  window service is updated with the new values   Ultimately  in the repeated div I have     ng-repeat  user in users  ng-class    new-row     index   findColNumberPerRow       0       Please  let me know any flaws in this approach   Hope it can be helpful

User · Answer

Lodash has a chunk method built-in now which I personally use   https   lodash com docs chunk  Based on this  controller code might look like the following    scope groupedUsers     chunk   scope users  3     View code    lt div class  row  ng-repeat  rows in groupedUsers  gt     lt div class  span4  ng-repeat  item in rows  gt   item   lt  div gt   lt  div gt

User · Answer

Following is a more simple way    lt table gt       lt tr ng-repeat  item in lists  ng-hide   index 2   0  gt           lt td gt               lt label gt    lists  index  name   lt  label gt           lt  td gt           lt td ng-hide   lists  index 1   gt               lt label gt    lists  index 1  name   lt  label gt           lt  td gt       lt  tr gt   lt  table gt    Cumulo Nimbus s answer is useful for me but I want this grid wrapped by a div which can show the scrollbar when the list is too long     To achieve this I added style  height 200px  overflow auto  to a div around the table which causes it to show as a single column   Now works for array length of one

User · Answer

A simple trick with  clearfix  CSS recommended by Bootstrap    x000D   x000D   lt div class  row  gt  x000D         lt div ng-repeat-start  value in values  class  col-md-4  gt  x000D            value   x000D         lt  div gt  x000D         lt div ng-repeat-end ng-if   index   3    0  class  clearfix  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Many advantages  Efficient  fast  using Boostrap recommendations  avoiding possible  digest issues  and not altering Angular model

User · Answer

I m new in bootstrap and angularjs  but this could also make Array per 4 items as one group  the result will almost like 3 columns  This trick use bootstrap break line principle    lt div class  row  gt    lt div class  col-sm-4  data-ng-repeat  item in items  gt     lt div class  some-special-class  gt       item XX      lt  div gt    lt  div gt   lt  div gt

User · Answer

I found myself in a similar case  wanting to generate display groups of 3 columns each  However  although I was using bootstrap  I was trying to separate these groups into different parent divs  I also wanted to make something generically useful   I approached it with 2 ng-repeat as below    lt div ng-repeat  items in quotes  ng-if     index   3   gt     lt div ng-repeat  quote in quotes  ng-if   index  lt    parent  index   2  amp  amp   index  gt    parent  index  gt                      some content        lt  div gt   lt  div gt    This makes it very easy to change to a different number of columns  and separated out into several parent divs

User · Answer

Basing off of m59 s very good answer   I found that model inputs would be blurred if they changed  so you could only change one character at a time   This is a new one for lists of objects for anyone that needs it      EDIT Updated to handle multiple filters on one page   app filter  partition   function       var cache          holds old arrays for difference repeat scopes   var filter   function newArr  size  scope        var i        oldLength   0        newLength   0        arr             id   scope  id        currentArr   cache id       if   newArr  return       if  currentArr          for  i   0  i  lt  currentArr length  i              oldLength    currentArr i  length                    if  newArr length    oldLength          return currentArr     so we keep the old object and prevent rebuild  it blurs inputs        else         for  i   0  i  lt  newArr length  i    size            arr push newArr slice i  i   size                  cache id    arr        return arr               return filter         And this would be the usage    lt div ng-repeat  row in items   partition 3 this  gt     lt span class  span4  gt          index       lt  span gt   lt  div gt

User · Answer

This code will help to align the elements with three columns in lg  and md mode  two column in sm mode  and single column is xs mode   lt div class  row  gt   lt div ng-repeat  oneExt in configAddr ext  gt       lt div class  col-xs-12 col-sm-6 col-md-4 col-lg-4  gt            index 1              lt input type  text  name  macAdr   index 1            id  macAddress  ng-model  oneExt newValue  value     gt       lt  div gt   lt  div gt

User · Answer

The most reliable and technically correct approach is to transform the data in the controller  Here s a simple chunk function and usage   function chunk arr  size      var newArr         for  var i 0  i lt arr length  i  size        newArr push arr slice i  i size          return newArr      scope chunkedData   chunk myData  3     Then your view would look like this    lt div class  row  ng-repeat  rows in chunkedData  gt     lt div class  span4  ng-repeat  item in rows  gt   item   lt  div gt   lt  div gt    If you have any inputs within the ng-repeat  you will probably want to unchunk rejoin the arrays as the data is modified or on submission  Here s how this would look in a  watch  so that the data is always available in the original  merged format    scope  watch  chunkedData   function val       scope data      concat apply     val      true      deep watch   Many people prefer to accomplish this in the view with a filter  This is possible  but should only be used for display purposes  If you add inputs within this filtered view  it will cause problems that can be solved  but are not pretty or reliable   The problem with this filter is that it returns new nested arrays each time  Angular is watching the return value from the filter  The first time the filter runs  Angular knows the value  then runs it again to ensure it is done changing  If both values are the same  the cycle is ended  If not  the filter will fire again and again until they are the same  or Angular realizes an infinite digest loop is occurring and shuts down  Because new nested arrays objects were not previously tracked by Angular  it always sees the return value as different from the previous  To fix these  unstable  filters  you must wrap the filter in a memoize function  lodash has a memoize function and the latest version of lodash also includes a chunk function  so we can create this filter very simply using npm modules and compiling the script with browserify or webpack   Remember  display only  Filter in the controller if you re using inputs   Install lodash   npm install lodash-node   Create the filter   var chunk   require  lodash-node modern array chunk    var memoize   require  lodash-node modern function memoize     angular module  myModule        filter  chunk   function       return memoize chunk         And here s a sample with this filter    lt div ng-repeat  row in   a   b   c   d   e   f     chunk 3  gt     lt div class  column  ng-repeat  item in row  gt          parent  index row length   index 1      item      lt  div gt   lt  div gt    Order items vertically  1  4 2  5 3  6   Regarding vertical columns  list top to bottom  rather than horizontal  left to right   the exact implementation depends on the desired semantics  Lists that divide up unevenly can be distributed different ways  Here s one way    lt div ng-repeat  row in columns  gt     lt div class  column  ng-repeat  item in row  gt        item      lt  div gt   lt  div gt    var data     a   b   c   d   e   f   g     scope columns   columnize data  3   function columnize input  cols      var arr         for i   0  i  lt  input length  i          var colIdx   i   cols      arr colIdx    arr colIdx             arr colIdx  push input i          return arr      However  the most direct and just plainly simple way to get columns is to use CSS columns    columns     columns  3       lt div class  columns  gt     lt div ng-repeat  item in   a   b   c   d   e   f   g    gt        item      lt  div gt   lt  div gt

User · Answer

this answers the original question which is how to get 1 2 3 in a column       asked by kuppu Feb 8  14 at 13 47   angularjs code   function GetStaffForFloor floor        var promiseGet   Directory Service getAllStaff floor       promiseGet then function  pl             scope staffList   chunk pl data  3     pl data                function  errorOD             log error  Errored while getting staff list    errorOD             function chunk array  columns        var numberOfRows   Math ceil array length   columns          puts 1  2  3 into column     var newRow         array is row-based      for  var i   0  i  lt  array length  i              var columnData   new Array columns           if  i    numberOfRows  break          for  j   0  j  lt  columns  j                          columnData j    array i   numberOfRows   j                     newRow push columnData              return newRow           this works but 1  2  3 is in row       var newRow             for  var i   0  i  lt  array length  i    columns              newRow push array slice i  i   columns      push effectively does the pivot  array is row-based                return newRow       View Code  note  using bootstrap 3     lt div class  staffContainer  gt       lt div class  row  ng-repeat  staff in staffList  gt           lt div class  col-md-4  ng-repeat  item in staff  gt   item FullName length  gt  0   item FullName      Rm     item RoomNumber        lt  div gt       lt  div gt   lt  div gt

User · Answer

I have a function and stored it in a service so i can use it all over my app   Service   app service  SplitArrayService   function      return       SplitArray  function  array  columns            if  array length  lt   columns                return  array                       var rowsNum   Math ceil array length   columns            var rowsArray   new Array rowsNum            for  var i   0  i  lt  rowsNum  i                  var columnsArray   new Array columns               for  j   0  j  lt  columns  j                      var index   i   columns   j                   if  index  lt  array length                        columnsArray j    array index                     else                       break                                              rowsArray i    columnsArray                    return rowsArray                 Controller    scope rows     SplitArrayService SplitArray  scope images  3     im splitting an array of images into 3 columns   Markup     lt div class  col-sm-12  ng-repeat  row in imageRows  gt        lt div class  col-sm-4  ng-repeat  image in row  gt            lt img class  img-responsive  ng-src    image src    gt        lt  div gt    lt  div gt

User · Answer

This example produces a nested repeater where the outer data includes an inner array which I wanted to list in two column   The concept would hold true for three or more columns   In the inner column I repeat the  row  until the limit is reached   The limit is determined by dividing the length of the array of items by the number of columns desired  in this case by two   The division method sits on the controller and is passed the current array length as a parameter   The JavaScript slice 0  array length   columnCount  function then applied the limit to the repeater   The second column repeater is then invoked and repeats slice  array length   columnCount  array length  which produces the second half of the array in column two    lt div class  row  ng-repeat  GroupAccess in UsersController SelectedUser Access  ng-class   even   even  odd   odd   gt       lt div class  col-md-12 col-xs-12  style   padding-left 15px   gt           lt label style  margin-bottom 2px   gt  lt input type  checkbox  ng-model  GroupAccess isset    gt   GroupAccess groupname   lt  label gt       lt  div gt       lt div class  row  style   padding-left 15px   gt           lt div class  col-md-1 col-xs-0  gt  lt  div gt           lt div class  col-md-3 col-xs-2  gt               lt div style  line-height 11px  margin-left 2px  margin-bottom 2px   ng-repeat  Feature in GroupAccess features slice 0  state DivideBy2 GroupAccess features length    gt                   lt span class  GrpFeature  gt   Feature featurename   lt  span gt               lt  div gt           lt  div gt           lt div class  col-md-3 col-xs-2  gt               lt div style  line-height 11px  margin-left 2px  margin-bottom 2px   ng-repeat  Feature in GroupAccess features slice  state DivideBy2 GroupAccess features length   GroupAccess features length    gt                   lt span class  GrpFeature  gt   Feature featurename   lt  span gt               lt  div gt           lt  div gt           lt div class  col-md-5 col-xs-8  gt           lt  div gt       lt  div gt   lt  div gt       called to format two columns state DivideBy2   function nValue        return Math ceil nValue  2        Hope this helps to look at the solution in yet another way    PS this is my first post here   -

User · Answer

I fix without  row   lt div class  col col-33 left  ng-repeat  photo in photos  gt     Content here     lt  div gt    and css   left     float  left

User · Answer

lt div class  row  gt     lt div class  col-md-4  ng-repeat  remainder in  0 1 2   gt       lt ul gt         lt li ng-repeat  item in items  ng-if   index   3    remainder  gt   item   lt  li gt       lt  ul gt     lt  div gt   lt  div gt

User · Answer

Another way is set width 33 33   float left to a wrapper div like this    lt div ng-repeat  right in rights  style  width  33 33  float  left   gt       lt span style  width 60px display inline-block text-align right  gt    index   lt  span gt       lt input type  number  style  width 50px display inline-block    gt   lt  div gt

User · Answer

m59 s answer is pretty good  The one thing I don t like about it is that it uses divs for what could potentially be data for a table   So in conjunction with m59 s filter  answer somewhere above   here is how to display it in a table    lt table gt       lt tr class    ng-repeat  rows in foos   chunk 2  gt           lt td ng-repeat  item in rows  gt   item   lt  td gt       lt  tr gt   lt  table gt

[javascript] how to split the ng-repeat data with three columns using bootstrap

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-repeat