How to display length of filtered ng-repeat data

前端 未结 8 1148
花落未央
花落未央 2020-11-22 08:11

I have a data array which contains many objects (JSON format). The following can be assumed as the contents of this array:

var data = [
  {
    \"name\": \"         


        
相关标签:
8条回答
  • 2020-11-22 08:23

    Here is worked example See on 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;
      });
    });
    

    0 讨论(0)
  • 2020-11-22 08:28

    It is also useful to note that you can store multiple levels of results by grouping filters

    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>
    

    here's a demo fiddle

    0 讨论(0)
  • 2020-11-22 08:29

    The easiest way if you have

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

    Filtered data length

    <div>{{ (data | filter: query).length }}</div>
    
    0 讨论(0)
  • 2020-11-22 08:30

    For completeness, in addition to previous answers (perform calculation of visible people inside controller) you can also perform that calculations in your HTML template as in the example below.

    Assuming your list of people is in data variable and you filter people using query model, the following code will work for you:

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

    Note that this solution works fine if you want to use filtered data only once in a page. However, if you use filtered data more than once e.g. to present items and to show length of filtered list, I would suggest using alias expression (described below) for AngularJS 1.3+ or the solution proposed by @Wumms for AngularJS version prior to 1.3.

    New Feature in Angular 1.3

    AngularJS creators also noticed that problem and in version 1.3 (beta 17) they added "alias" expression which will store the intermediate results of the repeater after the filters have been applied e.g.

    <div ng-repeat="person in data | filter:query as results">
        <!-- template ... -->
    </div>
    
    <p>Number of visible people: {{results.length}}</p>
    

    The alias expression will prevent multiple filter execution issue.

    I hope that will help.

    0 讨论(0)
  • 2020-11-22 08:38

    For Angular 1.3+ (credits to @Tom)

    Use an alias expression (Docs: Angular 1.3.0: ngRepeat, scroll down to the Arguments section):

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

    For Angular prior to 1.3

    Assign the results to a new variable (e.g. filtered) and access it:

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

    Display the number of results:

    Showing {{filtered.length}} Persons
    

    Fiddle a similar example. Credits go to Pawel Kozlowski

    0 讨论(0)
  • 2020-11-22 08:38

    You can do it with 2 ways. In template and in Controller. In template you can set your filtered array to another variable, then use it like you want. Here is how to do it:

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

    If you need examples, see the AngularJs filtered count examples/demos

    0 讨论(0)
提交回复
热议问题