web-dev-qa-db-fra.com

ngRepeat - limite le nombre de résultats affichés

Je suis un énorme AngularJS n00b et je trouve même difficile de comprendre les tutoriels . Ce tutoriel me guide dans la construction d'une application qui affiche les téléphones. Je suis sur étape 5 et j'ai pensé, à titre expérimental, que j'essaierais de permettre aux utilisateurs de spécifier le nombre de personnes à afficher. 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 dans laquelle les utilisateurs peuvent entrer le nombre de résultats qu'ils souhaitent afficher:

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 sera montré. Tout ce que je veux faire est de lire le numéro dans cette entrée à partir de la vue et de le mettre dans la ligne data.splice. J'ai essayé avec et sans guillemets, et ni l'un ni l'autre. Comment puis-je faire cela?

javascriptmodel-view-controllerangularjsscope
141
Captain Stack

Un peu plus de "méthode angulaire" consisterait à utiliser le filtre simple limitTo, fourni nativement par Angular:

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

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

338
Stewie

Un peu tard pour la fête, mais cela a fonctionné pour moi. Espérons que quelqu'un d'autre le trouve utile.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
44
couzzi

stocker toutes vos données initialement

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

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

EDITavait accidentellement mis la montre à l'extérieur du contrôleur, elle aurait dû être à l'intérieur.

2
shaunhusain

voici un autre moyen de limiter votre filtre au format html, par exemple, je souhaite afficher 3 listes à la fois que je vais utiliser limitTo: 3

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>
2
Rizo

Cela fonctionne mieux dans mon cas si vous avez un objet ou un tableau multidimensionnel. Il ne montrera que les premiers éléments, les autres seront simplement ignorés en boucle.

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

Changer 5 sur ce que vous voulez.

1
fdrv

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>
0
Rajkiran Shetty