Sort rows and columns replicated with angle

Question

Sort rows and columns replicated with angle

Navigation

#1 by (1 votes)

1

I need help to sort the buttons I am generating with angular. I'm using "ng-repeat" and it's generating the 8 buttons correctly however they're getting out of the order I need. Here is the code and the 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 display the 1-4 buttons in the lower left corner, and the 5-8 buttons in the lower right corner. Anyone have any idea how I should fix it? Thanks for any help.

html angularjs css

asked by anonymous 25.08.2017 / 20:48

1 answer

How to notify the Jsoup function Redirect after receiving response from the server?

score 1 · Accepted Answer

With table , the proposal would be different, split this array into two ( I'll follow the line of the question ) with the command slice and put ng-repeat in 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><divng-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>

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