This is not necessarily a problem with Angular but eventually with different HTML elements and how they are drawn on the page. To force the divs to be on the same line you have to use CSS. display: inline;
or float: left;
for example. Alternatively you can use span
instead of div
which by the nature of things is a inline
element.
About these elements and how to manipulate them:
.na-mesma-linha {
display: inline;
}
* {
margin: 5px;
}
<div>div A1</div>
<div>div A2</div>
<div class="na-mesma-linha">div B1</div>
<div class="na-mesma-linha">div B2</div><span>span 1</span>
And how to group them?
Here you can use Angular to insert a new element to encapsulate these elements, but you can also do this with CSS:
div {
float: left;
margin: 5px;
}
div:nth-child(4n + 1) {
clear: left;
}
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
<div>div 6</div>
<div>div 7</div>
<div>div 8</div>
<div>div 9</div>
If you want to do with Angular, ie in HTML you have to regroup the array marcarRedistribuir
to have subarrays of 4 elements. Example:
marcarRedistribuir = marcarRedistribuir.reduce((arr, nr, i) => {
const groupIndex = Math.floor(i / 4);
if (!arr[groupIndex]) arr.push([]);
arr[groupIndex].push(nr);
return arr;
}, []);
and then use this:
<div flex layout="row" flex="100">
<div layout="row" flex="25" layout-padding layout-align="center center" ng-repeat="group in marcarRedistribuir">
<div ng-repeat="redistribuir in group">
{{redistribuir.numero}}
</div>
</div>
</div>