Advanced structuring: surrounding elements ngRepeated Angular.js
You have an array of objects that you iterate over, How would you surround each (x) element with (element)?
If your goal is:
have (element) surrounding every 4 ng-repeated elements?
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
to have (element) surrounding every 2 groups of 4 ng-repeating elements
complicated
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
/
complicated
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
surrounding
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
ng-repeated-elem
/
/
Common use of ng-repeat:
<div ng-controller="ExampleContrller as example" >
<div ng-repeat="ex in example.arr">
<span>{{ex.a}}</span>
<span>{{ex.b}}</span>
</div>
</div>
outputs:
<div ng-controller="ExampleContrller as example" >
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
</div>
how can you get ng-repeat to output this:
<div ng-controller="ExampleContrller as example" >
<section> <!-- get a section to surround every (x) ng-repeated elements -->
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
</section>
<section>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
<div ng-repeat="ex in example.arr">
<span>a</span>
<span>b</span>
</div>
</section>
</div>
+3
source to share
2 answers
Here's a way to do it by creating another array with the correct grouping and using two ng-repeat
:
$scope.data2 = (function(data, count) {
var arr = [];
var len = data.length / count;
for (var i=0 ; i<len ; i++) {
arr.push(data.slice(i*count, (i+1)*count));
}
return arr;
})($scope.data, 3);
-
<section ng-repeat="group in data2">
<div ng-repeat="item in group">
<span>{{item.a}}</span>
<span>{{item.b}}</span>
</div>
</section>
data
is the original array and count
is the number of items in each group
Here's the fiddle: http://jsfiddle.net/a9n1e7w5/2/
There will probably be a better way to do this, but it works.
+2
source to share
It's literally the same thing Austin wrote, he just wrote it better.
<main id="main" class="content column" role="main" ng-controller="GalleryController as gallery">
<div ng-repeat="row in gallery.rows" class="content row">
<article ng-repeat="gal in row" class="post">
<div class="post-content">{{gal.p}}</div>
</article>
</div>
</main>
/**
* Splits an array of items into smaller arrays within the item.
* @param {Array} - arrayOfItems
* @param {Number} - numberOfRows (default is 4)
* @returns {Array}
*/
function wrapIntoRows(arrayOfItems, numberOfRows) {
var items = arrayOfItems,
rows = numberOfRows || 4,
wrappedDom = [];
function wrap(arr, num) {
var surround, notSurrounded, _num = num;
if (arr.length > _num) {
surround = arr.slice(0, _num);
notSurrounded = arr.slice(_num, arr.length);
wrappedDom.push(surround);
// loop
wrap(notSurrounded, _num);
} else {
var remainder = _num - arr.length;
surround = arr;
for (var i = 0; i < remainder; i++) {
var emptydiv = document.createElement('div');
surround.push({});
}
wrappedDom.push(surround);
}
}
wrap(items, rows);
return wrappedDom;
}
var Gallery = angular.module('Gallery', []);
Gallery.controller('GalleryController', function ($scope) {
var gallery = this,
ArrayOfData = [
{ p: "value 1" }
, { p: "value 2" }
, { p: "value 3"}
, { p: "value 4"}
, { p: "value 5"}
, { p: "value 6"}
];
gallery.rows = wrapIntoRows(ArrayOfData);
$scope.GalleryController = this;
return $scope.CompanyController;
});
angular.bootstrap(document.body, [
"Gallery"
]);
0
source to share