How to use angularjs search filter in table

Question

I am using this for pagination in my tables. The library uses ng-repeat in its directive and creates its own array from the array I pass to it.

I can't use the search filter provided by angularjs since the library does the ng-repeat with its own array(from my array).

Is there any way that I can use the search filter while using this library.

This is what the table looks like(the way the library expects)

<table at-table at-list="myarray" at-paginated at-config="tableConfig">
   <thead>
      <tr>
         <th class="text-center" at-attribute="index">Sl No</th>
         <th class="text-center" at-attribute="vendor_name">Vendor Name</th>
         <th class="text-center" at-attribute="email_id">EmailId</th>
      <tr>
   </thead>
   <tbody>
      <tr>
         <td class="text-center" class="text-center" at-attribute="index">{{calculateIndex($index)}}</td>
         <td class="text-center" at-sortable at-implicit at-attribute="vendor_name"></td>
         <td class="text-center" at-sortable at-implicit at-attribute="email_id"></td>
      </tr>
   </tbody>
</table>
<div>
   <at-pagination at-config="tableConfig" at-list="myarray"></at-pagination>
</div>

I do not use ng-repeat in my tables. The library does it.

The at-list above is how it takes my array and uses it to create its own array that contains only the rows displayed.

How do I use angularjs search filter?

Edit I changed the html in the library and added a item in libraryArray | filter:searchText and it works, but since the library's array only contains the rows currently displayed, it searches and displays only those in current page(of pagination)

Alon Shmiel · Accepted Answer · 2018-11-03 07:42:38Z

2

Use ng module: $filter.

You can find this link useful.

(click on "Interactive Example")

answered Nov 3, 2018 at 7:42

Alon Shmiel

7,10927 gold badges95 silver badges140 bronze badges

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

2 Comments

Dwigh Over a year ago

hey, thanks. i should have seen that. i will accept your answer. but i have many tables in a page. im trying to write a common function that takes both original and filtered array. i am assigning the filtered array to the parameter itself instead of assigning to the $scope array. it does not work. can you tell me how i can use a common function

Dwigh Over a year ago

nvm.. i did this and it worked.$scope[filteredList] = $filter("filter")(originalList, $scope.searchText); while passing the array name in the html

RJBo · Accepted Answer · 2018-11-03 20:32:34Z

0

A great library for pagination, filtering and sorting all of which is implemented very quickly and easily is ngTable, here's a link:

NPM Link

API and short tutorial

answered Nov 3, 2018 at 20:32

RJBo

331 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to use angularjs search filter in table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related