Style bootstrap rows with angular ng-repeat

Question

Using ng-repeat, I want to have the ability to "break" out of the loop to display parts of the data in different column layouts. Here is the start of the ng-repeat I have as pseudo code. I am not sure how to "chunk" out my data, other than perhaps a filer or custom directive?

var items= [1,2,3,4,5,6,7,8,9];

<div ng-repeat="item in items">
    <!-- 3 columns -->
    <div class="row">   
        <div class="item col-md-4">
            {{item}}
        </div>
    </div>

... break out of loop after 3 items to continue looping in a new row

    <!-- 2 columns -->
    <div class="row">
        <div class="item col-md-6">
            {{item}}
        </div>
    </div>

... etc ....

</div>

And the html below is the output I would like to achieve:

<!-- 3 columns -->
<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
</div>
<!-- 2 columns -->
<div class="row">
    <div class="col-md-6">4</div>
    <div class="col-md-6">5</div>
</div>
<!-- 1 column -->
<div class="row">
    <div class="col-md-12">6</div>
</div>
<!-- 3 columns -->
<div class="row">
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
</div>

I'd like to acheive this by passing in a parameter to a filter or similar. Something similar found here in the following thread. Please help! --> add bootstrap rows during ng-repeat

score 1 · Accepted Answer · answered Feb 16 '15 at 13:08

1

As explain in the link you provide, you could chunk your array in the controller before ngRepeat:

app.controller('MainCtrl', function($scope) {

  $scope.myArray = [1,2,3,4,5,6,7,8,9];

  $scope.rowFilter = function (data) {

    var rows = [];

    var slices = [3,2,1,3];
    slices.forEach(function (s) {
      rows.push(data.splice(0,s));
    });

    return rows;
  };

  $scope.processArray = $scope.rowFilter($scope.myArray);
});
// filter for add multiple class
app.filter("col", function() {
  return function(value) {
    return ['col-xs-','col-sm-', 'col-md-'].map( function (c) { return c + value} ).join(' ');
  }
});

And in the view:

<div class="row" ng-repeat="row in processArray">
    <div ng-repeat="column in row" ng-class="(12/row.length) | col">{{column}}</div>
</div>

DEMO

answered Feb 16 '15 at 13:08

MamaWalter

2,073
1
18
27

this is great! Works well for a start. Now, another question as your answer has sparked my thought process. If an add() function was created such that when you click a column a new column is created and inserted directly after the column you just clicked, pushing any trailing existing columns down and right. Each row is independent and keeps the 3 column, 2, 1 3. See example I started here, though I'm not sure where to go from here --> http://plnkr.co/edit/kcF9jFzENkYUbg88sJdo?p=preview – PartyPancakes Feb 17 '15 at 02:40
not sure to understand exactly what behavior you want but it would better to update the data `array` and the slices `array` on `click` and then filter again. Something like that: http://plnkr.co/edit/VhcyerFfin7LF3XlQpgb?p=preview – MamaWalter Feb 17 '15 at 13:20
You can take the behavior out of the controller like this : http://stackoverflow.com/a/30426750/1943442 – user1943442 May 24 '15 at 19:57

score 0 · Answer 2 · answered Feb 15 '15 at 20:44

<div class="row">
<% 
var data = [1,2,3,4,5,6,7,8,9];
var columnClass = 'md-4';
for(var i=0; data.length; i++) {
%> <div class="col-<%=columnClass%>"><%=data[i]%></div><%
if(i == 2) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-6';
}    
if(i == 4) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-12';
}  
if(i == 5) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-4';
}  
}
%>
</div>

Style bootstrap rows with angular ng-repeat

2 Answers2

DEMO