web-dev-qa-db-fra.com

Comment réaliser une mise en page / table avec Angular.js?

Supposons que je reçoive un littéral d'objet de plus de 15 objets et que je dois les afficher dans une présentation de Nice (pas tous dans une rangée). Quelle est la méthode la plus efficace pour contrôler à quel moment la ligne doit être interrompue/la page doit se terminer?

En ce moment, j'utilise ng-repeat sur les lignes de la table et le résultat est une table longue et mince avec une colonne.

Éditer pour clarification. Peut avoir des objets dans des objets/plusieurs paramètres. Voici mon objet:

$scope.zones = [
        {"name": "Zone 1",
         "activity": "1"},
        {"name": "Zone 2",
         "activity": "1"},
        {"name": "Zone 3",
         "activity": "0"},
        {"name": "Zone 4",
         "activity": "0"},
        {"name": "Zone 5",
         "activity": "0"},
        {"name": "Zone 6",
         "activity": "0"},
        {"name": "Zone 7",
         "activity": "1"},
        {"name": "Zone 8",
         "activity": "0"},
        {"name": "Zone 9",
         "activity": "0"},
        {"name": "Zone 10",
         "activity": "0"},
        {"name": "Zone 11",
         "activity": "1"},
        {"name": "Zone 12",
         "activity": "1"},
        {"name": "Zone 13",
         "activity": "0"},
        {"name": "Zone 14",
         "activity": "0"},
        {"name": "Zone 15",
         "activity": "1"},
    ];
angularjsangular-uiangularjs-ng-repeat
36
gogogadgetinternet

Je voudrais utiliser tableau et mettre en œuvre la pagination dans le contrôleur pour contrôler ce qui est affiché et les boutons pour passer à la page suivante. This Fiddle pourrait vous aider.

example of the pagination

 <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                        <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
                        <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
                        <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
                        <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
                        <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
                        <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.field3}}</td>
                        <td>{{item.field4}}</td>
                        <td>{{item.field5}}</td>
                    </tr>
                </tbody>
            </table>

l'exemple $ scope.range dans le violon devrait être:

$scope.range = function (size,start, end) {
    var ret = [];        
    console.log(size,start, end);

       if (size < end) {
        end = size;
        if(size<$scope.gap){
             start = 0;
        }else{
             start = size-$scope.gap;
        }

    }
    for (var i = start; i < end; i++) {
        ret.Push(i);
    }        
     console.log(ret);        
    return ret;
};
70
Maxim Shoustin

C'est l'exemple le plus simple que j'ai trouvé pour la pagination! http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

15
Santosh

J'utilise cette solution:

C'est un peu plus concis puisque j'utilise: ng-repeat="obj in objects | filter : paginate" pour filtrer les lignes. Fait aussi en sorte qu'il fonctionne avec $ resource:

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

13
Nuno Silva

Voici ma solution. La solution de Maxim Shoustin pose un problème de tri. J'enveloppe également le tout dans une directive. La seule dépendance est UI.Bootstrap.pagination, qui a fait un excellent travail en pagination.

Voici le plunker

Voici le code source de github.

8
maxisam

ici, j'ai résolu mon problème de pagination angularJS avec un peu plus de Tweak côté serveur + vue fin, vous pouvez vérifier le code, il sera plus efficace. tout ce que je dois faire est de mettre deux nombres de début et de fin, ils représenteront l’index du tableau JSON renvoyé.

voici l'angulaire

var refresh = function () {
    $('.loading').show();
    $http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
        $scope.devices = response;


        $('.loading').hide();
    });
};

si vous voyez attentivement $ scope.CountStart et $ scope.CountStart sont deux arguments que je passe avec l'api

voici le code pour le bouton suivant

$scope.nextPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();


    if ($scope.currentPage >= 0) {
        $scope.currentPage++;

        $scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
        refresh();
    }
};

voici le code du bouton précédent

$scope.prevPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();

    if ($scope.currentPage > 0) {
        $scope.currentPage--;

        $scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;

        refresh();

    }
};

si le numéro de page est zéro, mon bouton précédent sera désactivé

   $scope.nextPageDisabled = function () {

    console.log($scope.currentPage);

    if ($scope.currentPage === 0) {
        return false;
    } else {
        return true;
    }
};
7
nur farazi

Table avec vider , trier et ) filtrer

enter image description here

Reportez-vous à l'exemple complet à l'adresse filtre de tri de la table Angularjs et pagination

2
Lewis Hai

La meilleure solution simple plug and play pour la pagination.

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

vous auriez besoin de remplacer ng-repeat par une directive personnalisée.

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>

Dans la page, il suffit d’ajouter

<div align="center">
       <dir-pagination-controls
            max-size="100"
            direction-links="true"
            boundary-links="true" >
       </dir-pagination-controls>
</div>

Dans votre charge index.html

<script src="./js/dirPagination.js"></script>

Dans votre module, ajoutez simplement des dépendances

angular.module('userApp',['angularUtils.directives.dirPagination']);

et c'est tout nécessaire pour la pagination.

Cela pourrait être utile pour quelqu'un.

2
Hema