8

I am using a filter on an array of items in a ng-repeat like this:

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

This works fine and filters the items perfectly.The problem arises because I am using displayItems with a uib-pagination element. The pagination uses totalItems instead of displayItems.

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

Obviously I need to somehow apply the filter on the total-items, then create the displayItems, and put the filteredItems in the uib-pagination.

Ie. When the person types, in the controller the filter is applied to the totalItems, and I create the filteredItems needed for the pagination. I also then create the displayItems from the filteredItems. How do I go about putting this into the controller and not in the HTML for the ng-repeat?

I'm not sure how to do this. Any thoughts? All help much appreciated....

I've included a plunker to show it (not) working in all its glory.... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

Tom O'Brien
  • 1,741
  • 9
  • 45
  • 73

5 Answers5

35

Try,

HTML,

<li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">

and

<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

JavaScript,

$scope.pageChanged = function() {
  //var startPos = ($scope.page - 1) * 3;
  //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
};

https://plnkr.co/edit/m3jXsxsCGfqKCJYHsw0u?p=preview

user1111
  • 1,840
  • 2
  • 14
  • 18
  • Cheers - that is exactly what I was looking for! – Tom O'Brien Jul 18 '16 at 08:54
  • Great, it worked perfect for me on ui-bootstrap-tpls-2.1.4.min – Kwesi Aryee Oct 07 '16 at 09:13
  • Wow I've never seen anyone use the `filteredData = ...` in the `ng-repeat`. Its amazing. Note that the brackets have to be exactly like that to work. – Nick M May 11 '17 at 14:23
  • +1 but a heads up for people like me for whom begin parameter was not working. `begin` parameter was introduced only after version 1.4.X. In my case I was using Angular 1.3.14 and took me couple of hours to figure out what was wrong :/ [Reference link](https://stackoverflow.com/questions/29282082/angular-limitto-filters-second-parameter-begin-does-not-seem-to-work-in-angul) – Gowthaman Feb 02 '18 at 19:43
3

You can access the filtered array by using as alias in ng-repeat expression

<li ng-repeat="item in displayItems | filter : {item_name: filterText} as filteredArray">

Then use that alias for total-items in pagination

<uib-pagination class="pagination-sm pagination"
    total-items="filteredArray.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Hi that looks kinda like what i want. But i my example i have displayItems and totalItems. The display items are whatever ten items i should display which are taken from the total items. I suppose what I am doing here is somewhat confused. I am filtering on the displayItems, while i should really be filtering on the totalItems. I think I need to do the filtering inside a function in the controller. Let me edit the question to reflect this..... – Tom O'Brien Jul 17 '16 at 15:42
  • Create simple plunker demo. I noticed different arrays but n't enough code showing to sort them out – charlietfl Jul 17 '16 at 15:56
  • That doesn't work as it only filters the displayItems. to create the filteredArray. ie. if we have 20 totalItems, we have two pages, each uses displayItems to show 10 items. We need to filter the 20, to give us 4, say. In your example, you are filtering the 10 currently being shown, not the total amount. – Tom O'Brien Jul 17 '16 at 18:57
0

This is what I have done to make it work:

    var vm = this;
    vm.objects = [];
    vm.filterData = [];

    vm.getAllRecords(vm);

    vm.totalItems = vm.filterData.length;
    vm.currentPage = 1;
    vm.numPerPage = 5;
    vm.paginate = paginate;
    vm.filterItems = filterItems;

    function paginate(value) {
        var begin, end, index;
        begin = (vm.currentPage - 1) * vm.numPerPage;
        end = begin + vm.numPerPage;
        index = vm.filterData.indexOf(value);
        return (begin <= index && index < end);
    };

    function getAllRecords(vm) {

        $http.post('Get Data from Backend'
        ).then(function successCallback(response) {
            vm.objects = response.data;
            // you can pass blank space at first where you don't know the filter items
            vm.filterItems("");
        }, function errorCallback(response) {

        });

    }

    function filterItems(searchValue) {
        // i am writing this condition because I want to get the search updated even 
       //if you delete one space from the field
        if(searchValue === undefined || searchValue === "") {
            setDisplayItems(vm.objects);
        } else {
            var data = $filter('filter')(vm.objects, searchValue , false, '')
            setDisplayItems(data);
            vm.currentPage = 1;
        }

    }

    function setDisplayItems(data){
        vm.filterData = data;
        vm.totalItems  = data.length;
    }
}

HTML Code:

    <table >
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in filterData | filter : paginate ">
          <td>{{obj.name}}</td>
          <td>{{obj.id}}</td>

        </tr>
      </tbody>
    </table>

     <ul uib-pagination total-items="totalItems" ng-model="currentPage"  max-size="5" boundary-links="true" items-per-page="numPerPage" ></ul>

</div>
Kabiraj Kharel
  • 203
  • 2
  • 11
0

Here I am providing solution with ngx-pagination 

// install ngx-pagination
npm install ngx-pagination --save


<pagination-controls (pageChange)="p = $event"></pagination-controls>

<div *ngFor="let item of items | filter: filterParam | paginate: { itemsPerPage: 6, currentPage: p }"> </div>
Bhaskararao Gummidi
  • 2,513
  • 1
  • 12
  • 15
-2

Please Change This type But if you search only one field related why you search specific. that no need if you have more field then you make it . That's your code into some modify i hope sure it's working.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myModule" ng-controller="myController">

    <input type="text" class="form-control advertise-filter-input sharp-corners"
      placeholder="Filter..." ng-model="filterText">

    <ul>

          <li ng-repeat="item in filterData = (displayItems | filter :  filterText)">
              <div>{{item.itemName}}</div>
      </li>

    </ul>

    <uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
            ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

  </body>

</html>
VjyV
  • 344
  • 2
  • 13