NgRepeat kullanırken görüntülenen sonuç sayısını sınırlama

148

AngularJS öğreticileri anlamak zor buluyorum ; Bu telefon görüntüleyen bir uygulama inşa ederek beni yürüyor. Ben çıkıyorum adım 5 ve ben kullanıcılar gösterilmesini istiyorum kaç belirtmek için izin çalışacaktı bir deneme olarak düşündük. Görünüm şöyle:

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

Kullanıcıların gösterilmesini istedikleri sonuçları girebilecekleri bu satırı ekledim:

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

İşte benim denetleyicim:

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

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

Önemli çizgi:

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

Ben kaç telefon gösterilmesi gerektiğini temsil etmek için bir sayı sabit kodlayabilirsiniz. Eğer koyarsam 5, 5 gösterilir. Tek yapmak istediğim, o girişteki numarayı görünümden okumak ve bunu data.splicesatıra koymak . Tırnaklarla ve tırnak işaretleri olmadan denedim ve ikisi de çalışmıyor. Bunu nasıl yaparım?

— Kaptan Yığını
kaynak

345

Biraz daha "Açısal yol" limitTo, Angular tarafından doğal olarak sağlanan basit filtreyi kullanmak olacaktır :

<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

— Stewie
kaynak

54

"Takip etme" özelliğini kullanıyorsanız filtrelerden sonra sonuncusu ZORUNLU - işaret etmeye ve birkaç dakika daha tasarruf etmeye değer.

— stephan.com

3

Filter ve limitTo kullanırken kullanılabilir öğelerin sayısını almanın bir yolu var mı? Kullanmak istiyorum limitToama sınırı artırmak için "daha fazla yükle" düğmesi sağlamak. Bu yalnızca daha fazla kayıt varsa görüntülenmelidir.

— Tim Büthe

Nedir filter:query?

— bigpony

OP sorusu başına @defmx querygeliyorSearch: <input ng-model="query">

— jusopi

45

Partiye biraz geç kaldım, ama bu benim için çalıştı. Umarım bir başkası faydalı bulur.

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

— couzzi
kaynak

2

Bu büyük bir dizi ise limitToFilter kullanmaktan daha az verimli olacağından şüpheleniyorum, çünkü her öğe değerlendirilmelidir

— rom99

3

Çok daha fazla bir destek dizisinden 6 öğe göstermek istedim bir senaryo vardı. Kullanarak ng-if="$index < 6"tüm dizi aranabilir tutarken sadece ilk 6 göstermek için izin verdi (bir arama alanı ile birlikte bir filtre var).

— Jeroen Vannevel

Sınır değil, 3'ten sonra

— sayılırsa

@ Jek-fdrv - Hayır, ng-ifbu durumda tekrarlayıcının $indexdaha büyük olan DOM öğesini oluşturmaz 3. eğer $indextekrarlayıcı olduğunu 0, 1, or 2, durumdur trueve DOM düğümleri oluşturulur. ng-ifdan farklıdır ng-hideanlamda elemanlar olduğu değil DOM ilave edildi.

— couzzi

2

başlangıçta tüm verilerinizi sakla

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 yanlışlıkla saati içinde olması gereken kontrolörün dışına koymuştu.

— shaunhusain
kaynak

2

burada html üzerinde filtrenizi sınırlamak için başka bir yol, örneğin ben limitTo kullanacağımdan daha sonra 3 listesini görüntülemek istiyorum : 3

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

— Rizo
kaynak

1

Nesneniz veya çok boyutlu diziniz varsa bu benim durumumda daha iyi çalışır. Sadece ilk öğeleri gösterecek, diğeri döngüde göz ardı edilecektir.

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

Ne istediğinizi 5 değiştirin.

— fdrv
kaynak

0

Ng tekrarında sınırlı sayıda sonuç görüntülemek için limitTo filtresini kullanın.

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

— Rajkiran Shetty
kaynak

-3

Bunu başarmanın bir başka (ve daha iyi olduğunu düşünüyorum) yolu aslında verileri kesmek. limitTo tamam ama dizi gerçekten binlerce içerdiğinde 10 ile sınırlandırırsanız ne olur?

Servisimi ararken sadece bunu yaptım:

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

Bu, görünüme gönderilenleri sınırlar, bu nedenle performans için bunu ön uçta yapmaktan çok daha iyi olmalıdır.

— Matt Saunders
kaynak

LimitTo uygulaması zaten array.slice () kullanır, dizi boyutundaki herhangi bir fark performans üzerinde kendiniz yapmakla aynı farka sahip olmalıdır. github.com/angular/angular.js/blob/master/src/ng/filter/…

— rom99

ancak limitTo görünüme gönderilen verileri gerçekten sınırlamaz, oysa bu şekilde yapar. Bunu console.log () kullanarak test ettim.

— Matt Saunders

1

Evet, ne yapıyorsun görünümüne yeni bir dizi açığa (gerçekten herhangi bir yere 'gönderme' olarak düşünmek olmaz). Verilerdeki yalnızca ilk 10 öğeyle ilgileniyorsanız ve verilere başka hiçbir yere başvurulmadıysa, bu şekilde yapmak bellek kapladığı alanı azaltabilir (verilerin çöp toplanabileceği varsayılarak). Ancak yine de dataetrafa bir referans tutuyorsanız, bu limitTo kullanmaktan daha verimli değildir.

— rom99