Skip to main content
4 de 4
adicionou 49 caracteres ao conteúdo
César Sousa
  • 2,1mil
  • 1
  • 15
  • 34

Como usar grid com ng-repeat no angularjs?

Tenho um app móvel eu quero que o ng-repeat crie o conteudo em uma grid como tenho no exemplo abaixo mas que repita sempre asssim como exemplo abaixo:

<div class="row responsive-md">
        <div class="col">
            <a href="#/app/comer">
                <div class="img_comer">
                    <div class="texto_categorias_home">
                        <div><i class="fa-fa-cutlery"></i></div>
                        Comer
                    </div>
                </div>
            </a>
        </div>
        <div class="col">
            <a href="#/app/dormir">
                <div class="img_dormir">
                    <div class="texto_categorias_home">
                        <div><i class="fa-fa-bed"></i></div>
                        Dormir
                    </div>
                </div>
            </a>
        </div>
    </div>

Neste caso esta manual agora quero fazer igual mas em ng-repeat como posso fazer ?

View ng-repeat

<div class="row" ng-repeat="noticias in noticias_home">
        <div class="col">
            <a href="#/app/ver-noticia/{{noticias.url_artigo}}/{{noticias.id}}">
                <div style="background: url(https://www.sabeonde.pt/gtm/anexos/posts_home/{{noticias.id_anexo}}.{{noticias.tipo}}); border-top-left-radius:10px; border-top-right-radius:10px; height: 200px; background-size: 100% 100%; background-repeat: no-repeat;">
                </div>
            </a>
            <div style="border-bottom-left-radius:10px; border-bottom-right-radius:10px; height: 100px; background-color: white;">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2" valign="top">
                            <a href="#/app/ver-noticia/{{noticias.url_artigo}}/{{noticias.id}}"><div style="font-size: 15px; color:black; margin:5px 0px 15px 10px;  font-weight: bold; ">{{noticias.titulo}}</div></a>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                           <div ng-init="liked='Gosto'" ng-click="like({{noticias.id}})" ng-controller="LikeNoticiasHome" style="margin-left:10px;" class="botao_gosto"><i class="fa fa-heart"></i> {{liked}}</div>
                           <div id="mostra_gostos" class="mostra_gostos">{{noticias.likeCount}}</div>
                           <div ng-click="partilhar({{noticias.id}})" ng-controller="PartilhaNoticiasHome" class="botao_posts"><i class="fa fa-share-alt"></i> Partilhar</div>
                           <a href="#/app/ver-noticia/{{noticias.url_artigo}}/{{noticias.id}}"><div class="botao_posts"><i class="fa fa-search"></i> Ver +</div></a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

Controller

.controller('ListaNoticiasHome', function($scope, $http, $stateParams, sessionService) {
    $http.get("https://www.sabeonde.pt/api/api_noticias_home.php").success(function (data) {
        $scope.noticias_home = data; 
    });
})
César Sousa
  • 2,1mil
  • 1
  • 15
  • 34