Ograniczenie liczby wyświetlanych wyników podczas korzystania z ngRepeat

Uważam, że samouczkiAngularJS są trudne do zrozumienia; ten prowadzi mnie przez budowanie aplikacji, która wyświetla telefony. Jestem na krok 5 i pomyślałem, że jako eksperyment spróbuję pozwolić użytkownikom określić, ile chcą być wyświetlane. Widok wygląda tak: 

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

Dodałem tę linię, w której użytkownicy mogą wprowadzić, ile wyników chcą wyświetlić: 

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

Oto mój kontroler: 

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

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

Ważna linia jest: 

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

Mogę kodować w liczbie, aby określić, ile telefonów powinno być wyświetlanych. Jeśli włożę 5, zostanie pokazane 5. Wszystko, co chcę zrobić, to odczytać numer z tego wejścia z widoku i umieścić go w linii data.splice. Próbowałem z cytatami i bez, ani pracy. Jak to zrobić?

Author: Sebastian Simon, 2013-07-14
Source

7 answers

Nieco bardziej "kanciasty sposób" byłoby użycie prostego limitTo filtra, jak natywnie dostarczane przez 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

 347
Author: Stewie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-06 13:06:26

Trochę za późno na przyjęcie, ale to mi pomogło. Mam nadzieję, że ktoś inny uzna to za przydatne.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
 46
Author: couzzi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-14 16:07:39

Oto inny sposób na ograniczenie filtra w html, na przykład chcę wyświetlić listę 3 w czasie, niż użyję limitTo:3

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>
 3
Author: Rizo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-25 07:32:17

Początkowo Przechowuj wszystkie dane 

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

EDIT przypadkowo umieścił Zegarek Na Zewnątrz kontrolera, który powinien być w środku.

 2
Author: shaunhusain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-14 20:32:19

To działa lepiej w moim przypadku, jeśli masz obiekt lub tablicę wielowymiarową. Wyświetli tylko pierwsze elementy, inne zostaną zignorowane w pętli.

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

Zmień 5 na to, co chcesz.

 1
Author: fdrv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-15 11:35:12

Użyj filtra limitTo, aby wyświetlić ograniczoną liczbę wyników w ng-repeat.

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>
 0
Author: Rajkiran Shetty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 12:43:01

Innym (i myślę, że lepszym) sposobem osiągnięcia tego jest przechwycenie danych. limitTo jest w porządku, ale co jeśli ograniczasz się do 10, gdy Twoja tablica zawiera tysiące?

Dzwoniąc do mojego serwisu po prostu zrobiłem to: 

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

To ogranicza to, co jest wysyłane do widoku, więc powinno być znacznie lepsze dla wydajności niż robienie tego na front-endzie.

 -2
Author: Matt Saunders,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-05 15:36:54