AngularJS Trick #1: Getting correct filtered length value of an array outside the scope of ng-repeat

In this post I am going to show, how we can get the correct filtered length value of an array outside the scope of ng-repeat in AngularJS. This is my 9th blog in AngularJS series.

So, recently I have been working on some AngularJS code and I came across an issue. I would provide a functional example here to demonstrate that issue. So, basically I have an array of string and I would filter it by text entered in a textbox and outside I have a label which shows the number of text that are shown currently and after they had been filtered. So, here is the code using jsfiddle:-

HTML:

<div ng-controller="myController as ctrl" style="padding:0 15px">
    <div class="container-fluid">
        <div class="page-header">
             <h1>AngularJS Trick <small>#1</small></h1>

        </div>
        <div class="row well">
            <label>Search:<input ng-model="searchText" /></label>
            <hr/>
            <table id="searchTextResults">
                <tbody>
                    <tr>
                        <th>Name</th>
                    </tr>
                    <tr ng-repeat="name in ctrl.names | filter:searchText">
                        <td>{{name}}</td>
                    </tr>
                </tbody>
            </table>
            <hr/>Showing <b>{{ctrl.names.length}}</b> results...</div>
    </div>
</div>

JS:

var app = angular.module('myModule', []);
app.controller('myController', function () {

    // Set the name string array here
    this.names = ['John', 'Mary', 'Mike', 'Adam', 'Julie', 'Juliette'];
});

Working Demo on jsFiddle #1

So, the text showing the count in the bottom seems to be correct, but the issue came once I entered some text in the text-box to filter the text. The count was still the same for example I entered “j” in the search box and the text showing below had been filtered from 6 to 3 but the bottom text was still showing “Showing 6 results…” when it should have been changed to “Showing 3 results…” after filtering. This happened since the length of names array is always 6. So, we need to save the filtered result in a new variable to get the correct output. This issue is fixed like “name in newNameVar = (ctrl.names | filter:searchText)” and then we can use the length of the “newNameVar” to get the correct output. The result is shown in updated demo below:-

HTML:

<tr ng-repeat="name in newNameVar = (ctrl.names | filter:searchText)">
     <td>{{name}}</td>
</tr>
<hr/>Showing <b>{{newNameVar.length}}</b> results...</div>

Working Demo on jsFiddle #2

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

One thought on “AngularJS Trick #1: Getting correct filtered length value of an array outside the scope of ng-repeat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s