web-dev-qa-db-ja.com

Angularページネーション付きフィルターを使用する

次のようなng-repeatの項目の配列にフィルターを使用しています。

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

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

これは正常に機能し、アイテムを完全にフィルターします。uib-pagination要素でdisplayItemsを使用しているため、問題が発生します。ページネーションでは、displayItemsではなくtotalItemsを使用します。

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

明らかに、何らかの方法でtotal-itemsにフィルターを適用してから、displayItemsを作成し、filteredItemsをuib-paginationに配置する必要があります。

つまり。人が入力すると、コントローラーでフィルターがtotalItemsに適用され、ページネーションに必要なfilteredItemsが作成されます。次に、filteredItemsからdisplayItemsも作成します。これをng-repeatのHTMLではなくコントローラーに配置するにはどうすればよいですか？

これを行う方法がわかりません。何かご意見は？助けてくれてありがとう...

私はそれがすべての栄光で働いていることを（示さないで）示すためにプランカーを含めました... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

angularjspaginationangular-ui-bootstrap
7
Tom O'Brien

試して、

HTML、

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

そして

<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

32
user1111

as alias式でng-repeatを使用して、フィルタリングされた配列にアクセスできます

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

次に、そのエイリアスをtotal-itemsのページネーションで使用します

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

ここで私は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>
0
Bhaskararao Gummidi

これは私がそれを機能させるために行ったことです：

    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コード：

    <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>
0
Kabiraj Kharel