CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
hollyquinn
hollyquinn

Reputation: 652

AngularJS number of results found in ng-repeat

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">

Upvotes: 0

Views: 186

Answers (3)

Michel
Michel

Reputation: 28249

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

recent versions of angular added a return as for filter :

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

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

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.

Upvotes: 1

Related Questions