How to display length of filtered ng-repeat data?

Revati S Misra 787 17 Jun 2024

Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

1 Answers

Ashutosh Patel 19 Jun 2024

Length of ng-repeat data

To specify the length of changed data in ng-repeat in AngularJS (assuming you are using AngularJS based on ng-repeat), you can follow these steps:

Create a Filtered Array- Use AngularJS filters to create a new layout with only changed objects based on your criteria.

Display the Length- Use AngularJS expressions ({{ }}) or directives to specify the length of the modified layout.

Filter the Data

Imagine you have an array of items that you iterate using ng-repeat. You can use AngularJS filters (filter in this case) to get items that match certain criteria.

Example-

Let's take an input field where you can filter items based on a property called search

<input type="text" ng-model="search">
<div ng-repeat="item in items | filter: search">
   {{ item.name }}
</div>

In the example above

ng-model="search" Binds the input field value to the search variable.
filter: search" Filters the items based on the search property that matches the value in the search.

Display the Length of Filtered Data

To specify the length of the filtered data, you can use a modified order with the filter array. Here's how you can determine the length.

<p>Number of filtered items: {{ (items | filter: search).length }}</p>

In the syntax above

(items | filter: search) Filter items based on the current value of the search.
.length returns the length of the filtered items.

Example-

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Filtered item Length Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <div class="my-2">
          <label class="form-label">Type text to search</label>
          <!-- input field for filter the items -->
          <input type="text" data-ng-model="search" class="form-control" placeholder="seatch here for filter" />
        </div>
        <div>
          <!-- count the length of filtered items -->
          <p>Length of filtered items: <span data-ng-bind="(names | filter : search).length" class="fw-semibold"></span></p>
         
          <table class="table my-2">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Country</th>
              </tr>
            </thead>
            <!-- all items bind in the table using ng-repeat and apply filter directive with search property-->
            <tbody data-ng-repeat="data in names | filter : search">
              <tr>
                <td data-ng-bind="$index+1"></td>
                <td data-ng-bind="data.name"></td>
                <td data-ng-bind="data.country"></td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
          // all data
            $scope.names = [
                {name:'Jani',country:'Norway'},
                {name:'Carl',country:'Sweden'},
                {name:'Margareth',country:'England'},
                {name:'Hege',country:'Norway'},
                {name:'Joe',country:'Denmark'},
                {name:'Gustav',country:'Sweden'},
                {name:'Birgit',country:'Denmark'},
                {name:'Mary',country:'England'},
                {name:'Kai',country:'Norway'}
            ];
        });

    </script>

</body>
</html>

In the example above-

<input> field with property search for filtering the items from collection

<p> tag shows the length of the filtered items using data-ng-bind="(names | filter : search).length"

data-ng-repeat="data in names | filter : search" is used to bind the updated data into the table every time

Output-