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

MamaWalter · Accepted Answer · 2015-02-16 13:08:53Z

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, 2015 at 13:08

MamaWalter

2,1131 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PartyPancakes Over a year ago

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 --> plnkr.co/edit/kcF9jFzENkYUbg88sJdo?p=preview

MamaWalter Over a year ago

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: plnkr.co/edit/VhcyerFfin7LF3XlQpgb?p=preview

user1943442 Over a year ago

You can take the behavior out of the controller like this : stackoverflow.com/a/30426750/1943442

Bass Jobsen · Accepted Answer · 2015-02-15 20:44:01Z

0

<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>

answered Feb 15, 2015 at 20:44

Bass Jobsen

49.1k16 gold badges147 silver badges226 bronze badges

Collectives™ on Stack Overflow

Style bootstrap rows with angular ng-repeat

2 Answers 2

DEMO

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related