Filtered item Length Example

--- title: "How to display length of filtered ng-repeat data?" description: "How to display length of filtered ng-repeat data?" author: "Revati S Misra" published: 2024-06-17 updated: 2024-06-19 canonical: https://www.mindstick.com/forum/160752/how-to-display-length-of-filtered-ng-repeat-data category: "angular js" tags: ["javascript", "angular js", "angularjs ng repeat", "angularjs filter"] reading_time: 3 minutes --- # How to display length of filtered ng-repeat data? How to display [length](https://www.mindstick.com/interview/1915/what-is-the-difference-between-char_length-and-length) of filtered ng-[repeat](https://www.mindstick.com/forum/156775/give-an-example-of-the-linq-repeat-method) [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science)? ## Replies ### Reply by Ashutosh Patel ### 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 ```html

``` ## 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**. ```html

Number of filtered items: {{ (items | filter: search).length }}

``` ## 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- ```html Filtered item Length Example

Type text to search

Length of filtered items:

#	Name	Country

``` ## In the example above- `` field with property `search`for filtering the items from collection `

` 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- ![How to display length of filtered ng-repeat data?](https://www.mindstick.com/mindstickforums/37d50b86-a271-4f34-9ad7-ffc1b8c4afff/images/47d65edc-166d-45c5-be0c-f0cf67d0730b.png) **Also, Read:** [Adding multiple class using ng-class](https://www.mindstick.com/forum/160751/adding-multiple-class-using-ng-class) --- Original Source: https://www.mindstick.com/forum/160752/how-to-display-length-of-filtered-ng-repeat-data Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.