Sort html with grid angularjs

Question

Sort html with grid angularjs

Navigation

#1 by (0 votes)

1

I need a hint on how to sort elements in my home with no blanks appearing. The problem is: I have a page that lists all the services registered, this page is with pagination that lists the elements 8 per page, so far everything ok, list the elements perfectly, the question is that white space appear that are not wanted, they occupy spaces that could be occupied by listed elements.

<h3 ng-if="services.length == 0">Nenhum serviço encontrado.</h3>
					<div class="col-4 col-no-left" ng-repeat="service in services">
						<a class="service-card"  href="{{ service.url }}">
							<p class="title " >{{service.name}}</p>
							<p ng-bind-html="service.description | limitTo:150 "><p>{{service.description.length >= 15 	? "..." : " "}}</p><p class="btn">ver mais</p></p>
							<span ng-repeat="category in service.categories">{{ category.name }}.</span>
						</a>
					</div>

This block is what I do the organization of the elements in views. I looked for some solutions, I saw about the masonry and the UI-grid, but I did not find a step by step how to install and configure them. Thank you for your attention!

angularjs css grid

asked by anonymous 18.04.2016 / 21:16

1 answer

list has not been declared phonegap plugin on AngularJS ngCordova

score 0 · Answer 1

I made an example here using ui-grid .

You only need to include your data in the data property of the ui-grid attribute in your HTML.

The result is as follows:

(function() {
  'use strict';

  angular
    .module('appExemploTabela', ['ui.grid']);

  angular
    .module('appExemploTabela')
    .controller('TabelaController', TabelaController);

  TabelaController.$inject = [];

  function TabelaController() {
    var tabela = this;
    
    iniciar();
    
    function iniciar() {
      tabela.registros = [];
      tabela.registros.push({id: 1, nome: 'Registro 1'});
      tabela.registros.push({id: 2, nome: 'Registro 2'});
      tabela.registros.push({id: 3, nome: 'Registro 3'});
      tabela.registros.push({id: 4, nome: 'Registro 4'});
      tabela.registros.push({id: 5, nome: 'Registro 5'});
      tabela.registros.push({id: 6, nome: 'Registro 6'});
      tabela.registros.push({id: 7, nome: 'Registro 7'});
      tabela.registros.push({id: 8, nome: 'Registro 8'});
      tabela.registros.push({id: 9, nome: 'Registro 9'});
      tabela.registros.push({id: 10, nome: 'Registro 10'});
    }
  }
})()

.minha-tabela {
  width: 500px;
  height: 250px;
}

<link rel="styleSheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js"></script>

<div ng-app="appExemploTabela">
  <div ng-controller="TabelaController as tabela">
    <div ui-grid="{data: tabela.registros}" class="minha-tabela"></div>
  </div>
</div>