Angularjs template x divs per row – I want my angular template to output a html fragment every 2rd time on ng-repeat.
“Angularjs repeat output every 3rd time using bootstrap or such”
This outputs every 3rd element but then doesn’t output the ones in between.
|
1 2 3 |
<div class="row" ng-if="$index % 3 == 0"> |
So essentially what we want is 3 items (divs) per row.
Angular Template HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row" ng-repeat="result in (data.results.length/3 | array)"> <div class="col-md-4" ng-repeat="result in data.results.slice(3*$index, 3*$index + 3)"> ... </div> </div> |
Angular Filter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Inputs a number and outputs an array with that length. //(3 | array) => [0,1,2] angular.module("app").filter('array', function() { return function(arrayLength) { if (arrayLength) { arrayLength = Math.ceil(arrayLength); var arr = new Array(arrayLength), i = 0; for (; i < arrayLength; i++) { arr[i] = i; } return arr; } }; }); |
In Action:
This jsfiddle shows it in actions: https://jsfiddle.net/3zhbB/6/
refs:
- https://docs.angularjs.org/api/ng/directive/ngIf
- https://stackoverflow.com/questions/11056819/how-would-i-use-angularjs-ng-repeat-with-twitter-bootstraps-scaffolding
- https://stackoverflow.com/questions/15605597/angularjs-and-twitter-bootstrap-creating-x-items-per-row
Wow thanks, I’ve been digging this for days ! It works great.
How can I add pagination to this example?
how can you do this with filtered items?