Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Angularjs ng-repeat e bootstrap row

por UNIVALLE SISTEMAS
| 95.8k xp | 18 posts

Boa tarde!

Tenho uma dúvida sobre ng-repeat.

Usando o exemplo do sistema 'apurapic' do curso de Angularjs1 como base para minha dúvida, como eu faria para fazer com que a galeria de fotos não fique toda quebrada caso eu insira mais de 6 fotos? Já que estou usando o bootstrap para definir o meu grid.

Teria de usar algum ng-if, ng-class, ou algo parecido? Como eu faria?

<photo-galery class="col-sm-2 animate_galery" titulo="{{foto.titulo}}" ng-repeat="foto in fotos | filter: filtro">
    <div class="panel panel-default">
         <div class="panel-heading">
               <h3 class="panel-title text-center">{{titulo}}</h3> 
         </div>
    </div>
</photo-galery>

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor

Você precisaria implementar a lógica de quebra em seu controller e combinar vários ng-repeat. No caso, JavaScript puro mesmo.

Contudo, o que o pessoal costuma fazer é usar algum componente de grid que abstraia essa complexidade de você. Aliás, estamos usando um framework orientado a componente, nada mais justo do que apelar para um, certo?

Existem vários no mercado, vou listar alguns para que você possa experimentar e ver qual acha mais fácil de usar:

https://github.com/angular-ui/bootstrap
demo https://angular-ui.github.io/bootstrap/

http://ui-grid.info/
https://github.com/angular-ui/ui-grid

Talvez você curta mais o que encapsula o bootstrap, mas o ui-grid também é bem famoso.

Outra coisa que o pessoal faz é não usar grid nenhum, deixar as coisas fluírem lado a lado. É a abordagem que eu tenho adotado, um layout fluído.

Sucesso e bom estudo meu aluno.