Ng-repeat with div

2

I have a list of information.

I need you to show 4 records per line, I tried several ways, but I could not. It shows all the records in a row.

<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>

    
asked by anonymous 18.09.2017 / 16:44

2 answers

1

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>
    
18.09.2017 / 16:51
0

You are using diretivas of angular material , so any css structuring will ignore it, its code is correct, but if there is an exception in flex="25" , the next element goes down I see the image in the image are large), if it is not going down, add the directive, flex-wrap="wrap" or flex-wrap="nowrap" , that is, it is right, because if the element transcends the container the angular will not have the intelligence to recalculate the next. If the content does not transcend the container and the problem persists, some padding or margin must be set to either the div parent or the child.

    
18.09.2017 / 18:46