Как отобразить длину отфильтрованных данных ng-repeat

У меня есть массив данных, который содержит много объектов (формат JSON). Следующее может быть принято в качестве содержимого этого массива:

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

Теперь я отображаю эти детали как:

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

Здесь запрос моделируется в поле ввода, в котором пользователь может ограничить отображаемые данные.

Теперь у меня есть другое местоположение, в котором я отображаю текущее количество отображаемых людей / человек, т.е. Showing {{data.length}} Persons

Что я хочу сделать, так это то, что когда пользователь ищет человека и отображаемые данные фильтруются на основе запроса, Showing...personsтакже меняются значения людей, которые отображаются в данный момент. Но этого не происходит. В нем всегда отображается общее количество людей в данных, а не в отфильтрованном. Как узнать количество отфильтрованных данных?

Для Angular 1.3+ (кредиты @Tom)

Используйте псевдоним (Docs: Angular 1.3.0: ngRepeat , прокрутите вниз до раздела Arguments ):

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

Для угловых до 1,3

Присвойте результаты новой переменной (например filtered) и получите к ней доступ:

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

Показать количество результатов:

Showing {{filtered.length}} Persons

Возьмите похожий пример . Кредиты идут на Павла Козловского

Для полноты, в дополнение к предыдущим ответам (выполнить расчет видимых людей внутри контроллера), вы также можете выполнить эти вычисления в своем HTML-шаблоне, как в примере ниже.

Предполагая, что ваш список людей находится в dataпеременной и вы фильтруете людей, используя queryмодель, следующий код будет работать для вас:

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

• {{data.length}} - печатает общее количество людей
• {{(data|filter:query).length}} - печатает отфильтрованное количество людей

Обратите внимание, что это решение отлично работает, если вы хотите использовать отфильтрованные данные только один раз на странице. Однако если вы используете отфильтрованные данные более одного раза, например, для представления элементов и для отображения длины отфильтрованного списка, я бы предложил использовать выражение псевдонима (описанное ниже) для AngularJS 1.3+ или решение, предложенное @Wumms для версии AngularJS до версии 1.3.

Новая функция в Angular 1.3

Создатели AngularJS также заметили эту проблему и в версии 1.3 (бета 17) они добавили выражение «псевдоним», которое будет хранить промежуточные результаты ретранслятора после применения фильтров, например

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

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

Выражение псевдонима позволит предотвратить многократный вопрос выполнения фильтра.

Я надеюсь, что это поможет.

Самый простой способ, если у вас есть

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

Длина отфильтрованных данных

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

ngRepeat создает копию массива, когда применяет фильтр, поэтому вы не можете использовать исходный массив для ссылки только на отфильтрованные элементы.

В вашем случае может быть лучше применить фильтр внутри вашего контроллера, используя $filterсервис:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

И тогда вы используете filteredDataсвойство в вашем представлении вместо этого. Вот рабочий Плункер: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Начиная с AngularJS 1.3 вы можете использовать псевдонимы:

item in items | filter:x as results

и где-то:

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

Из документов :

Вы также можете указать необязательное выражение псевдонима, которое будет хранить промежуточные результаты повторителя после применения фильтров. Обычно это используется для визуализации специального сообщения, когда фильтр на ретрансляторе активен, но отфильтрованный набор результатов пуст.

Например: элемент в элементах | Фильтр: x в качестве результатов сохранит фрагмент повторяющихся элементов как результаты, но только после того, как элементы были обработаны через фильтр.

Также полезно отметить, что вы можете хранить несколько уровней результатов, группируя фильтры.

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>

вот демо скрипка

Вот сработал пример смотри на 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;
  });
});

Вы можете сделать это двумя способами . В шаблоне и в контроллере . В шаблоне вы можете установить свой отфильтрованный массив для другой переменной, а затем использовать его, как вы хотите. Вот как это сделать:

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

Если вам нужны примеры, посмотрите примеры / демоверсии отфильтрованного количества AngularJs