Ng-repeat with div

Question

I have a list of information.

I need you to show 4 records per line, I tried several ways, but I couldn’t. It shows all the records in one line.

<div flex layout="row" flex="100">
    <div layout="row" flex="25" layout-padding layout-align="center center" ng-repeat="redistribuir in marcarRedistribuir">
    {{redistribuir.numero}}
    </div>

Answer 1

This is not a problem necessarily with Angular but eventually with different HTML elements and how they are drawn on the page. To force 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 that by nature of things is an element inline.

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 this element, 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, that is in HTML you have to regroup the array marcarRedistribuir to have 4-element subrrays. 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 like 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>

Answer 2

Are you wearing the diretivas of angular material, therefore any css structuring it will ignore, your code is correct, but if there is an exception in flex="25", the next element goes down (from what I saw in the image the numbers are long), if it is not going down, add the directive, flex-wrap="wrap" or flex-wrap="nowrap", that is, you are right, because if the element transcends the container the angular will not have intelligence to recalculate the next. If the content does not transcend the container and the problem persists, some padding or margin must be set either in the div father or daughter.