I'm using angular.js and (for the sake of argument) bootstrap. Now I need to iterate on "things" and display them in ''rows'' :
<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<div class="row">
etc...
Now, how can I close my .row
div on every third thing with angular? I tried ui-if from angular-ui but even that doesn't make it.
If I were to use server-side rendering, I would do something like this (JSP syntax here, but does not matter) :
<div class="row>
<c:forEach items="${things}" var="thing" varStatus="i">
<div class="span4">
..
</div>
<%-- Here is the trick:--%>
<c:if test="${i.index % 3 == 2}">
</div><div class="row">
</c:if>
</c:forEach>
</div>
Note that I need to actually alter the DOM here, not just css-hiding elements. I tried with the repeat on the .row
and .span4
divs, with no avail.
Best Answer
Edit Nov 12, 2013
It seems that not only did angular change a little in 1.2, but that there is an even better method. I've created two filters. I tried to combine them into one but got digest errors. Here are the two filters:
And now the html will look like this:
jsFiddle: http://jsfiddle.net/W39Q2/
Edit Sept 20, 2013
While working with lots of data that needed dynamic columns I've come up with a better method.
HTML:
Javascript:
New Filter:
This allows it to be dynamic. To change the columns just change the numColumns.length. In the js fiddle you can see I've wired it up to a dropdown.
jsFiddle: http://jsfiddle.net/j4MPK/
Your html markup would look like this:
And then you could make a variable in your controller like so:
This way, you can have any number of columns you want.
jsfiddle http://jsfiddle.net/rtCP3/39/
Edit I've modified the fiddle to now support having a flat array of objects:
jsfiddle: http://jsfiddle.net/rtCP3/41/
The html now looks like this:
And then in the controller i have:
The $scope.numColumns variable is used to specify how many columns you want in each row.
To handle dynamic array size changes, put a watch on the length of the array (not the whole array, that would be redundent)
jsfiddle: http://jsfiddle.net/rtCP3/45/