Sort rows and columns replicated with angular

Question

I need help sorting the buttons I’m generating with angular. I am using "ng-repeat" and is generating the 8 buttons correctly but they are getting out of order I need. Follow the code and output image:

<style>
    .divpai {
        margin: 0 auto;
        width: 50%;
        border: 3px solid;
        border-color: darkblue;
        position: relative;
    }
    
    .tclass {
        position: absolute;
        bottom: 0;
    }
    
    .tclass td {
        width: 513px;
        padding: 5px;
    }
    
    .btf {
        color: white;
        font-weight: bold;
        font-size: 20px;
    }
</style>
<div class="page-header" id="principal" ng-controller="HomeCtrl">
    <div class="divpai" style="width:950px; height: 734px; background-color:#F3E10A" align="center">
        <table class="tclass">
            <tr ng-repeat="menus in menu" style="text-align: right;">
                <td style="text-align: left;" ng-if="4>=($index+1)"><button id="btf1" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{menus.nome}}</button></td>
                <td style="text-align: right; " ng-if="($index+1)>=5"><button id="btf5" class="btf" style="width:416px; height: 79px; background-color:#2E5491">{{menus.nome}}</button></td>
            </tr>
        </table>
    </div>
</div>

I want you to present the 1-4 buttons in the lower left corner, and the 5-8 buttons in the lower right corner. Does anyone have any idea how to fix ? I thank you for any and all help.

Answer 1

With table, the proposal would be another, divide this array into two parts or as many parts as needed (I will follow the line of the question) with the command Slice and put the ng-repeat us button as an example below:

var app = angular.module('app', []);
app.controller('HomeCtrl', function($scope) {
  $scope.menu = [{
    'nome': 'Botão 1'
  }, {
    'nome': 'Botão 2'
  }, {
    'nome': 'Botão 3'
  }, {
    'nome': 'Botão 4'
  }, {
    'nome': 'Botão 5'
  }, {
    'nome': 'Botão 6'
  }, {
    'nome': 'Botão 7'
  }, {
    'nome': 'Botão 8'
  }, {
    'nome': 'Botão 9'
  }, {
    'nome': 'Botão 10'
  }];
  $scope.render = function(start, end) {
    return $scope.menu.slice(start, end);
  }
});

.divpai {
  margin: 0 auto;
  width: 50%;
  border: 3px solid;
  border-color: darkblue;
  position: relative;
}

.tclass {
  position: absolute;
  bottom: 0;
}

.tclass td {
  width: 513px;
  padding: 5px;
}

.btf {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div class="page-header" id="principal" ng-controller="HomeCtrl">
    <div class="divpai" style="width:100%; height: 734px; background-color:#F3E10A" align="center">
      <table>
        <tr>
          <td style="text-align: center;">
            <button id="btf1" ng-repeat="menus in render(0,5)" class="btf" style="width:100%; height: 79px; background-color:#2E5491">{{menus.nome}}</button>
          </td>
          <td style="text-align: center;">
            <button id="btf5" ng-repeat="menus in render(5,10)" class="btf" style="width:100%; height: 79px; background-color:#2E5491">{{menus.nome}}</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

thus the first 5 buttons were in the first division of the table and the other 5 in the second division of the table.

_References

• Javascript Array: Slice vs splice
• Angular - ngRepeat
• HTML Tag
• Table