151 votes

Limitation du nombre de résultats affichés lors de l'utilisation de ngRepeat

Je trouve le Tutoriels AngularJS difficile à comprendre ; celui-ci me guide dans la création d'une application qui affiche les téléphones. Je suis sur étape 5 et j'ai pensé qu'à titre expérimental, j'allais essayer de permettre aux utilisateurs de spécifier le nombre d'images qu'ils souhaitent voir apparaître. La vue ressemble à ceci :

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

J'ai ajouté cette ligne où les utilisateurs peuvent indiquer le nombre de résultats qu'ils souhaitent voir apparaître :

How Many: <input ng-model="quantity">

Voici mon contrôleur :

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

La ligne importante est :

$scope.phones = data.splice(0, 'quantity');

Je peux coder en dur un nombre pour représenter le nombre de téléphones à afficher. Si je mets 5 dans, 5 seront affichés. Tout ce que je veux faire, c'est lire le nombre dans cette entrée à partir de la vue, et le mettre dans le champ data.splice ligne. J'ai essayé avec et sans guillemets, et aucun ne fonctionne. Comment dois-je m'y prendre ?

0voto

Utilisez le filtre limitTo pour afficher un nombre limité de résultats dans ng-repeat.

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>

-2voto

Matt Saunders Points 253

Une autre façon (et je pense meilleure) d'y parvenir est d'intercepter les données. limitTo est acceptable, mais que se passe-t-il si vous limitez à 10 alors que votre tableau contient en réalité des milliers de données ?

Lorsque j'ai appelé mon service, j'ai simplement fait ceci :

TaskService.getTasks(function(data){
    $scope.tasks = data.slice(0,10);
});

Cela limite ce qui est envoyé à la vue, et devrait donc être bien meilleur pour les performances que de le faire sur le front-end.

0 votes

L'implémentation de limitTo utilise array.slice() de toute façon, toute différence dans la taille du tableau devrait avoir la même différence sur les performances que de le faire soi-même. github.com/angular/angular.js/blob/master/src/ng/filter/

0 votes

Mais limitTo ne limite pas réellement les données envoyées à la vue, alors que cette façon de faire le fait. J'ai testé cela en utilisant console.log().

1 votes

Oui, ce que vous faites, c'est exposer un nouveau tableau à la vue (je ne dirais pas que c'est "envoyer" quelque chose quelque part). Si vous n'êtes intéressé que par les 10 premiers éléments des données et que celles-ci ne sont référencées nulle part ailleurs, cette façon de procéder pourrait réduire l'empreinte mémoire (en supposant que les données puissent être collectées). Mais si vous gardez toujours une référence à data autour, ce n'est pas plus efficace que d'utiliser limitTo.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X