Filtrelenen ng-tekrar verilerinin uzunluğu nasıl görüntülenir?

Birçok nesne (JSON biçimi) içeren bir veri dizisi var. Bu dizinin içeriği olarak aşağıdakiler kabul edilebilir:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

Şimdi, bu detayları şu şekilde görüntülüyorum:

<div ng-repeat="person in data | filter: query">
</div

Burada sorgu, kullanıcının görüntülenen verileri kısıtlayabileceği bir giriş alanına modellenir.

Şimdi, görüntülenmekte olan kişi / kişi sayısını görüntülediğim başka bir konumum var, yani Showing {{data.length}} Persons

Ne yapmak istiyorum kullanıcı bir kişi aradığında ve görüntülenen veri sorguya göre filtre, Showing...personsaynı zamanda şu anda gösterilen insanların değerini değiştirmek olduğunu. Ama olmuyor. Filtrelenmiş olandan ziyade her zaman toplam kişi verilerini görüntüler - filtrelenmiş veri sayısını nasıl alabilirim?

Açısal 1.3+ için (@Tom'a kredi)

Bir takma ad ifadesi kullanın (Dokümanlar: Angular 1.3.0: ngRepeat , Arguments bölümüne ilerleyin ):

<div ng-repeat="person in data | filter:query as filtered">
</div>

1.3 öncesi açısal için

Sonuçları yeni bir değişkene (örn. filtered) Atayın ve ona erişin:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

Sonuç sayısını göster:

Showing {{filtered.length}} Persons

Bir keman benzer bir örnek . Krediler Pawel Kozlowski'ye gidiyor

Tamlık için, önceki yanıtlara ek olarak (denetleyici içinde görünür kişilerin hesaplamasını yapın) bu hesaplamaları aşağıdaki örnekte olduğu gibi HTML şablonunuzda da yapabilirsiniz.

Kişi listenizin datadeğişken olduğunu ve querymodeli kullanarak kişileri filtrelediğinizi varsayarsak , aşağıdaki kod sizin için çalışır:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

• {{data.length}} - toplam kişi sayısını yazdırır
• {{(data|filter:query).length}} - filtrelenmiş kişi sayısını yazdırır

Filtrelenmiş verileri bir sayfada yalnızca bir kez kullanmak istiyorsanız bu çözümün iyi çalıştığını unutmayın . Daha örneğin mevcut olan öğelerin ve süzüldü liste uzunluğunu göstermek için bir kez daha veri filtre kullanır, ancak ben kullanarak öneririm takma ekspresyonunu angularjs için (aşağıda tarif edilen) 1.3 + veya önerdiği çözüm @Wumms 1.3 önce angularjs sürümü için.

Açısal 1.3'te Yeni Özellik

AngularJS yaratıcıları da problemin farkına vardılar ve versiyon 1.3'te (beta 17) filtreler uygulandıktan sonra tekrarlayıcının ara sonuçlarını saklayacak "takma ad" ifadesi eklediler.

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

Takma ifadesi birden filtre yürütme sorunu önleyecektir.

Umarım yardımcı olur.

Eğer sahip olmanın en kolay yolu

<div ng-repeat="person in data | filter: query"></div>

Filtrelenmiş veri uzunluğu

<div>{{ (data | filter: query).length }}</div>

ngRepeat, bir filtre uyguladığında dizinin bir kopyasını oluşturur; bu nedenle, yalnızca filtre uygulanmış öğelere başvurmak için kaynak diziyi kullanamazsınız.

Sizin durumunuzda, $filterservisi kullanarak kontrol cihazınızın içine filtre uygulamak daha iyi olabilir :

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

Ve sonra filteredDataözelliği görünümünüzde kullanırsınız. İşte çalışan bir Plunker: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

AngularJS 1.3'ten bu yana takma adları kullanabilirsiniz:

item in items | filter:x as results

ve bir yerlerde:

<span>Total {{results.length}} result(s).</span>

Gönderen docs :

Filtreler uygulandıktan sonra tekrarlayıcının ara sonuçlarını saklayacak isteğe bağlı bir takma ad ifadesi de sağlayabilirsiniz. Bu genellikle tekrarlayıcı üzerinde bir filtre aktifken özel bir mesaj oluşturmak için kullanılır, ancak filtrelenen sonuç kümesi boştur.

Örneğin: öğelerdeki öğe | filter: x, sonuç olarak yinelenen öğelerin parçasını sonuç olarak, ancak öğeler filtre aracılığıyla işlendikten sonra saklar.

Filtreleri gruplandırarak birden çok düzeyde sonuç depolayabileceğinizi not etmek de yararlıdır

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

İşte bir demo keman

İşte çalıştı örnek Plunker bakın

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});

Bunu 2 yolla yapabilirsiniz . Gelen şablona ve Kontrolör . Şablonda, filtrelenmiş dizinizi başka bir değişkene ayarlayabilir ve ardından istediğiniz gibi kullanabilirsiniz. İşte nasıl yapılacağı:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

Örneklere ihtiyacınız varsa, AngularJs filtrelenmiş sayım örneklerine / demolarına bakın