How to use grid with ng-repeat in angularjs?

Question

How to use grid with ng-repeat in angularjs?

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

1

I have a mobile app I want ng-repeat to create the content in a grid like I have in the example below but always repeat this as an example below:

<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>

In this case this manual now want to do the same but in ng-repeat how can I do?

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

angularjs

asked by anonymous 21.10.2015 / 18:46

3 answers

How to echo in a variable of this function? Error adding library using Linux

score 3 · Answer 1

Example of using grid with ng-repeat in 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>

You can customize the elements with the use of policies.

References:

link

score 2 · Answer 2

I changed your code to work, I already told you that you need to implement another controller called Share NewsHome

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>

score 2 · Answer 3

Assuming you need to first detect whether it is a tablet or not, let's do this through resolution, as some plugins to detect the device are not 100% reliable.

You can do this directly at app startup or at any resolution resize. This code works by including resize:

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

Note: In my case, this code is within controller , called mainCtrl , which is common to the whole app.

Assuming the resolution that determines whether it is a tablet or the resolution is less than 1024px, we can do the verification directly in the HTML. If the resolution is smaller, that is, if it is a tablet, we display the grid with the content.

For this you can use ng-if or ng-show , the difference is that ng-if will not render html until true value, that is, html will not exist in page until it is authorized to be displayed. Staying like this:

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

Now, to use ng-repeat , just set the name of the object and the array you want to repeat. To do this, set the ng-repeat always at the highest level of the block, so that it is repeated creating the optimal layout. For example:

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

Where "object" will be the parameter to define which field to display, and "list" would be the $scope that contains the array to be displayed.

Camos assume you have the following 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"}
];

Then you can access the array data within the blocks using the following definition: {{object.notice}} {{object.url}}. The name 'object' can be any setting you want. But remember to also change when you set ng-repeat. If you change one, you should change the other as well.

Edited:

Based on our conversation in the comments, let's imagine the following scenario:

News Array containing 5 stories;
Each news item has title, text, image and a link;

Let's assume the structure of this news array is this:

$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"}
];

To display this news within your block automatically, just set ng-repeat to the highest hierarchical level of the block to be repeated. In your case, it would be <div class="row"> that would look like this: <div class="row" ng-repeat="noticia in listNoticias" .

With this, the angular Js himself will be in charge of re-creating this whole block 5 times for you. The only thing you need to set now, is where the title will appear, where the text will appear and where the image will appear.

To display the data, you must reference the object referred to in ng-repeat and its name inside the array, that is: {{noticia.titulo}} co_de {{noticia.text}} and finally {{noticia.img}} .

In the end, your code will look like this below:

<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>

Ready. By doing this, the angular itself will take care of:

Identify the array;
Know how many repetitions it should do;
Repeat and create divs automatically;
Fill in the data according to the array you had;

Is it clearer now? I hope I have clarified your doubt.