1

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; 
    });
})

3 Respostas 3

3

Exemplo da utilização de grid com ng-repeat no AngularJS:

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

Você pode personalizar os elementos com a utilização de diretivas.

Referências:

http://www.w3schools.com/angular/angular_tables.asp

https://docs.angularjs.org/guide/directive

3
  • Pode editar e fazer um exemplo baseado no que tenho manual fazer para o ng-repeat igual ? Commented 21/10/2015 às 17:02
  • Tem como passar o código do JavaScript utilizando AngularJS preenchendo os objetos, atributos, arrays da sua controladora? Commented 21/10/2015 às 17:08
  • Coloquei na pergunta o controller Commented 21/10/2015 às 17:10
2

Alterei seu código para funcionar, ja te aviso que voce precisará implementar um outro controller chamado PartilhaNoticiasHome

var app = angular.module('myApp', []);
app.controller('ListaNoticiasHome', function($scope, $http) {
    console.log(1);
    $http.get("https://www.sabeonde.pt/api/api_noticias_home.php").success(function (data) {
        $scope.noticias_home = data; 
        console.log(data);
    });
});
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ListaNoticiasHome">
    
    <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.botao}}</div></a>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                          <!-- ... codigo removido, pois não esta especificado o outro controller chamado "PartilhaNoticiasHome"

                           <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 +dddddd</div></a>

                          --> 
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

2
+25

Partindo do princípio de que você precisa primeiramente detectar se é um tablet ou não, vamos fazer isso através da resolução, já que alguns plugins pra detectar o aparelho não são 100% confiáveis.

Você pode fazer isso diretamente na inicialização do app ou em qualquer resize da resolução. Este código funciona incluindo o resize:

$scope.$watch(function(){
    return $window.innerWidth;
}, function(value) {
    if (value < 1024) {
        $scope.mediaMobile = true;
    } else {
        $scope.mediaMobile = false;
    };
});

Obs.: No meu caso, este código está dentro de um controller, chamado mainCtrl, que é comum ao app todo.

Supondo que a resolução que determina se é um tablet ou não seja a resolução menor que 1024px, podemos fazer a verificação diretamente no HTML. Se a resolução for menor, ou seja, se for um tablet, nós exibimos o grid com o conteúdo.

Para isso você pode usar o ng-if ou o ng-show, a diferença é que o ng-if não irá renderizar o html até que o valor true, ou seja, o html não irá existir na página até que seja autorizado sua exibição. Ficando assim:

<div ng-if="mediaMobile">
    <div class="row responsive-md">
        <div class="col">
            [... resto do código ...]
        </div>
    </div>
</div>

Agora, para utilizar o ng-repeat, basta definir o nome do objeto e a array que você deseja repetir. Para isso, defina o ng-repeat sempre no maior nível do bloco, para que ele seja repetido criando o layout ideal. Por exemplo:

<div ng-if="mediaMobile">
    <div class="row responsive-md" ng-repeat="objeto in lista">
        <div class="col">
            [... resto do código ...]
        </div>
    </div>
</div>

Onde "objeto" vai ser o parametro para definir qual campo exibir, e "lista" seria o $scope que contem a array a ser exibida.

Camos supor que você possua a seguinte array:

$scope.lista = [
    {id:1, nome1: "Comer", nome2: "Dormir", url1:"umaurlcomer.com", url2:"umaurldormir.com"}, 
    {id:2, nome1: "Comer", nome2: "Dormir", url1:"duasurlcomer.com", url2:"umaurldormir.com"},
    {id:3, nome1: "Comer", nome2: "Dormir", url1:"tresurlcomer.com", url2:"umaurldormir.com"}
];

Depois você pode acessar os dados da array dentro dos blocos utilizando a seguinte definição: {{objeto.noticia}} {{objeto.url}}. O nome 'objeto' pode ser qualquer definição que você desejar. Mas lembre-se de alterar também quando for definir o ng-repeat. Se mudar em um, deve mudar no outro também.

Editado:

Baseado em nossa conversa nos comentários, vamos imaginar o seguinte cenário:

  • Array de noticias contendo 5 notícias;
  • Cada notícia possui título, texto, imagem e um link;

Vamos supor que a estrutura dessa array de notícias seja essa:

$scope.listNoticias = [
    {id:1, titulo:"Nova noticia 1", texto: "Corpo do texto...", img:"img/noticia1.jpg", link:"link/noticia/01.php"},
    {id:2, titulo:"Nova noticia 2", texto: "Corpo do texto...", img:"img/noticia2.jpg", link:"link/noticia/02.php"},
    {id:3, titulo:"Nova noticia 3", texto: "Corpo do texto...", img:"img/noticia3.jpg", link:"link/noticia/03.php"},
    {id:4, titulo:"Nova noticia 4", texto: "Corpo do texto...", img:"img/noticia4.jpg", link:"link/noticia/04.php"},
    {id:5, titulo:"Nova noticia 5", texto: "Corpo do texto...", img:"img/noticia5.jpg", link:"link/noticia/05.php"}
];

Para exibir essas notícias dentro do seu bloco de modo automático, basta definir o ng-repeat no maior nível hierárquico do bloco a ser repetido. No seu caso, seria a <div class="row"> que ficaria assim: <div class="row" ng-repeat="noticia in listNoticias".

Com isso, o próprio angularJs já vai se encarregar de recriar todo esse bloco 5 vezes para você. A única coisa que você precisa definir agora, é onde o título vai aparecer, onde o texto vai aparecer e onde a imagem vai aparecer.

Para exibir os dados, você deve fazer referencia ao objeto referido no ng-repeat e ao nome dele dentro da array, ou seja: {{noticia.titulo}} {{noticia.text}} {{noticia.img}} e por fim {{noticia.link}}.

No final, o seu código vai ser semelhante a este abaixo:

<div ng-if="mediaMobile">
    <div class="row responsive-md" ng-repeat="noticia in listNoticias">
        <div class="col">
            <a href="{{noticia.link}}">
                <div class="{{noticia.img}}">
                    <div class="texto_categorias_home">
                        <div><i class="fa-fa-cutlery"></i></div>
                        <h1>{{noticia.titulo}}</h1>
                        <p>{{noticia.texto}}</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- aqui você pode definir outros dados a serem exibidos, por exemplo -->
        <div class="col"> 
           <a href="{{noticia.outrolink}}">
               <div class="img_dormir">
                   <div class="texto_categorias_home">
                       <div><i class="fa-fa-bed"></i></div>
                       {{noticia.curiosidade}}
                   </div>
               </div>
           </a>
        </div>
    </div>
</div>

Pronto. Fazendo isso, o próprio angular irá se encarregar de:

  • Identificar a array;
  • Saber quantas repetições ele deverá fazer;
  • Repetir e criar as divs automaticamente;
  • Preencher os dados de acordo com a array que você tinha;

Ficou mais claro agora? Espero ter esclarecido sua dúvida.

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .