Doubt with ng-repeat

Asked

Viewed 154 times

8

I have the following code:

<div id="box-1" class="box">
   <div ng-repeat="task in contato " style="margin-top: 5px">
      <div class="md-card md-card-hover">
          <div class="md-card-content">
              <div style="margin-top:-20px">
                  <span>Cliente: {{ task.razao}}</span><br />
                  <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                  <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
              </div>
          </div>
      </div>
   </div>
 </div>
 <div id="box-2" class="box">
     <div ng-repeat="task in Andamento" style="margin-top: 5px">
         <div class="md-card md-card-warning md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>
 <div id="box-3" class="box">
     <div ng-repeat="task in fechado" style="margin-top: 5px">
         <div class="md-card md-card-success md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>
 <div id="box-4" class="box">
     <div ng-repeat="task in perdido" style="margin-top: 5px">
         <div class="md-card md-card-danger md-card-hover">
             <div class="md-card-content">
                 <span>Cliente: {{ task.razao}}</span><br />
                 <span>valor_negocio: {{ task.valor_negocio}}</span><br />
                 <span>valor_mensalidade: {{ task.valor_mensalidade}}</span><br />
             </div>
         </div>
     </div>
 </div>

And in my controller we have the json array:

 $scope.contato = [
   { "id": "1", "razao": "ADEMIR DA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
   { "id": "4", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.Andamento = [
    { "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.fechado = [
    { "id": "1", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

$scope.perdido = [
   { "id": "1", "razao": "ADEMIA", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "2", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" },
    { "id": "3", "razao": "ADEMIR", "titulo": "dfgdfg", "descricao": "GDFGDFG", "valor_negocio": " 5345.00 ", "valor_mensalidade": "5.00" }
];

this is the result: inserir a descrição da imagem aqui

how can I make empty spaces (when an array has more items than others), at the bottom?

CSS

#container {
    width: 100%;
    border-color: blue;
    text-align: left;
}

.box {
    display: inline-block;
    width: 24%;
    height: 200px;
    /*margin: 5px 5px;*/
}

.cabecalho {
    display: inline-block;
    width: 24%;
    height: 20px;
    /*margin: 5px 5px;*/
}

#box-1 {
    background-color: white;
}

#box-2 {
    background-color: white;
}

#box-3 {
    background-color: white;
}
angularjs angular ng-repeat

  • you use which CSS framework?

  • use that template http://preview.themeforest.net/item/altair-admin-material-design-uikit-template/full_screen_preview/12190654

  • To play your example you need to define this layout, the CSS framework, the problem presenting nothing more is than some CSS configuration

  • how would a css look that would force items to go to the top?

  • 1

    Ask your question all css files, because the normal.would be already at the top.so you have to change what is on the site ...

  • the template has several thousand css, I will have to find a way to force this via JS

  • Take a look at this class="box" in css ta like this .box { // code passes that code! I think it’s him!

  • I edited and pasted the Css, from a look there

  • 1

    I would need to set up a template to help you better, but the flexbox of css3 will help you do this... from this link https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Show 4 more comments

1 answer

-2

utilize vertical-align: top; in .box

.box {
    display: inline-block;
    width: 24%;
    height: 200px;
    vertical-align: top;
}

  • This does not answer the question. Create an example or something like.

Browser other questions tagged angularjs angular ng-repeat

You are not signed in. Login or sign up in order to post.