AngularJS number of results found in ng-repeat

Question

I have a table using ng-repeat to display some data, I have an input that allows the user to search the table and filter out a resultd based on what's typed in the input. I want to display on the screen a message that says how many results are found for the search item. Right now I can only get it to display the total number of records in all. Is there a way to do this? Here's my code:

<div>
<div>Lookup Results</div>
<div><input type="text" id="searchText" name="searchText" ng-model="query" /></div>

<table ng-if="query" class="table table-hover table-responsive" >
       <thead>     
           <tr>
               <th>
                   {{vm.filteredResults.length}} Results Found
               </th>
           </tr>       
        <tr>
            <td>Acc. ID</td>
            <td>Acc. Name</td>
            <td>Acc Address</td>
            <td>City</td>
            <td>Zip</td>
            <td>Phone</td>
            <td>Parent Name</td>
            <td>Account Type</td>
            <td>Account Status</td>
            <td>Credit Term</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="filteredResults = (result in vm.results | filter:query) ">
            <td>{{ result.accountId }}</td>
            <td>{{ result.accountName }}</td>
            <td>{{ result.address }}</td>
            <td>{{ result.city }}</td>
            <td>{{ result.state }}</td>
            <td>{{ reuslt.zip }}</td>
            <td>{{ result.phone }}</td>
            <td>{{ result.parentName }}</td>
            <td>{{ result.accountType }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.accountStatus }}</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td ng-hide="vm.results.length">

charlietfl · Accepted Answer · 2015-10-14 20:03:19Z

1

recent versions of angular added a return as for filter :

ng-repeat="result in vm.results | filter:query as filteredResults"

answered Oct 14, 2015 at 20:03

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tymeJV · Accepted Answer · 2015-10-14 19:57:29Z

1

Sure, you just need to assign a new property for the filtered results:

ng-repeat="filteredResults = (result in vm.results | filter:query)"

Now you can do:

<td ng-hide="filteredResults.length"></td>

filteredResults will contain the results set after filtering takes place.

answered Oct 14, 2015 at 19:57

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

hollyquinn Over a year ago

I edited my code to match yours. I'm getting back no results on this? What am I doing wrong? Thanks for your help. I'm a total noob.

Michel · Accepted Answer · 2015-10-14 20:07:28Z

1

<tr ng-repeat="result in filteredResults = (vm.results | filter: query)">
    <td>{{ result.accountId }}</td>
    <td>{{ result.accountName }}</td>
        ... 
</tr>

edited Oct 14, 2015 at 20:07

answered Oct 14, 2015 at 20:02

Michel

28.6k6 gold badges67 silver badges72 bronze badges

1 Comment

charlietfl Over a year ago

shouldn't it just be result in filteredResults = ( vm.results | filter: query)?

Collectives™ on Stack Overflow

AngularJS number of results found in ng-repeat

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related