Como exibir o comprimento dos dados de repetição ng filtrados

Eu tenho uma matriz de dados que contém muitos objetos (formato JSON). O seguinte pode ser assumido como o conteúdo dessa matriz:

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

Agora, eu mostro esses detalhes como:

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

Aqui, a consulta é modelada para um campo de entrada no qual o usuário pode restringir os dados exibidos.

Agora, tenho outro local no qual mostro a contagem atual de pessoas / pessoa sendo exibida, ou seja, Showing {{data.length}} Persons

O que eu quero fazer é que, quando o usuário procurar uma pessoa e os dados exibidos forem filtrados com base na consulta, eles Showing...personstambém alterem o valor das pessoas exibidas no momento. Mas isso não está acontecendo. Ele sempre exibe o total de pessoas nos dados e não no filtrado - como obtenho a contagem de dados filtrados?

Para Angular 1.3+ (créditos para @Tom)

Use uma expressão de alias (Docs: Angular 1.3.0: ngRepeat , role para baixo até a seção Argumentos ):

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

Para Angular anterior a 1.3

Atribua os resultados a uma nova variável (por exemplo filtered) e acesse-a:

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

Exiba o número de resultados:

Showing {{filtered.length}} Persons

Veja um exemplo semelhante . Os créditos vão para Pawel Kozlowski

Para completar, além das respostas anteriores (execute o cálculo de pessoas visíveis dentro do controlador), você também pode executar esses cálculos no seu modelo HTML, como no exemplo abaixo.

Supondo que sua lista de pessoas seja datavariável e você filtre as pessoas usando o querymodelo, o código a seguir funcionará para você:

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

• {{data.length}} - imprime o número total de pessoas
• {{(data|filter:query).length}} - imprime número filtrado de pessoas

Observe que esta solução funciona bem se você deseja usar dados filtrados apenas uma vez em uma página. No entanto, se você usar dados filtrados mais de uma vez, por exemplo, para apresentar itens e mostrar o comprimento da lista filtrada, sugiro usar a expressão de alias (descrita abaixo) para o AngularJS 1.3+ ou a solução proposta pela versão do @Wumms for AngularJS anterior à 1.3.

Novo recurso no Angular 1.3

Os criadores do AngularJS também notaram que o problema e na versão 1.3 (beta 17) eles adicionaram a expressão "alias" que armazenará os resultados intermediários do repetidor após a aplicação dos filtros, por exemplo

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

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

A expressão de alias impedirá vários problemas de execução de filtro.

Espero que ajude.

A maneira mais fácil se você tiver

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

Comprimento dos dados filtrados

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

O ngRepeat cria uma cópia da matriz quando aplica um filtro, portanto você não pode usar a matriz de origem para referenciar apenas os elementos filtrados.

No seu caso, pode ser melhor aplicar o filtro dentro do seu controlador usando o $filterserviço:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

E então você usa a filteredDatapropriedade em sua exibição. Aqui está um Plunker em funcionamento: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Desde o AngularJS 1.3, você pode usar aliases:

item in items | filter:x as results

e em algum lugar:

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

Dos documentos :

Você também pode fornecer uma expressão de alias opcional, que armazenará os resultados intermediários do repetidor após a aplicação dos filtros. Normalmente, isso é usado para renderizar uma mensagem especial quando um filtro está ativo no repetidor, mas o conjunto de resultados filtrados está vazio.

Por exemplo: item nos itens | filter: x como resultados armazenará o fragmento dos itens repetidos como resultados, mas somente após os itens terem sido processados ​​pelo filtro.

Também é útil observar que você pode armazenar vários níveis de resultados agrupando filtros

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>

aqui está um violino demo

Aqui está um exemplo trabalhado Veja no Plunker

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

Você pode fazer isso de duas maneiras . No modelo e no Controlador . No modelo, você pode definir sua matriz filtrada para outra variável e usá-la como desejar. Aqui está como fazê-lo:

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

Se você precisar de exemplos, consulte os exemplos / demonstrações de contagem filtrada do AngularJs