Search code examples
angularjsui.bootstrap

Filter in sliced ng-repeat


I try make table with pagination and filter using angular. I found nice pagination example (of course I didn't "ctrl+c, ctrl+v), but I have one problem. I use ng-repeat with slice but if I would make | filter this doesn't work properly, because filtered items didn't change pages. For example if item is on second page and I filter and is only one stiil stay on second page against go to first. Look on code and please help me make working filter

http://embed.plnkr.co/eheFSh/


Solution

  • At this case you should apply filter at first and only then pagination, i.e. slice:

    name: <input type='text' ng-model='searchName'/>
    id: <input type='text' ng-model='searchId'/>
    
    <tr ng-repeat="row in (data | filter : {name:searchName, id: searchId }).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
         <td>{{row.name}}</td>
         <td>{{row.id}}</td>
    </tr>