inserimento del filtro angolare con impaginazione

Sto usando un filtro su una serie di elementi in un ng-repeat come questo:inserimento del filtro angolare con impaginazione

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

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

Questo funziona bene e filtra gli elementi perfectly.The problema sorge perché sto usando displayItems con un elemento di paginazione uib. L'impaginazione utilizza totalItems invece di displayItems.

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

Ovviamente ho bisogno di applicare in qualche modo il filtro sul totale-voci, quindi creare le displayItems, e mettere i filteredItems nel UIB-impaginazione.

Ie. Quando la persona digita, nel controller il filtro viene applicato a TotalItems e creo gli elementi filtrati necessari per l'impaginazione. Quindi creo anche gli oggetti di visualizzazione da filteredItems. Come faccio a inserire questo nel controller e non nel codice HTML per la ng-repeat?

Non sono sicuro di come farlo. qualche idea? Tutto aiuto molto apprezzato ....

ho incluso un plunker di mostrarlo (non) che lavorano in tutto il suo splendore .... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

fonte

2016-07-17 Tom O' Brien

Modificare "elementi totali" in: 'totale-elementi =" filteredItems.length "'. – developer033

Rendere gli elementi totali in oggetti filtrati nel controller - come faccio a creare quegli elementi filtrati è la domanda? –

Prova questo. https://plnkr.co/edit/9diyq1FdTorI5kKmitDd?p=preview – charlietfl

prova,

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

fonte

2016-07-17 19:40:18 user1111

Cheers - questo è esattamente quello che stavo cercando! –

Ottimo, ha funzionato perfettamente con me su ui-bootstrap-tpls-2.1.4.min –

Wow non ho mai visto nessuno usare 'filteredData = ...' nel 'ng-repeat'. È fantastico. Nota che le parentesi devono essere esattamente come quelle per funzionare. –

È possibile accedere alla matrice filtrati utilizzando as alias in ng-repeat espressione

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

quindi utilizzare tale alias per total-items in paginazione

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

fonte

2016-07-17 15:15:48 charlietfl

Ciao, sembra un po 'come quello che voglio. Ma nel mio esempio ho displayItems e totalItems. Gli elementi di visualizzazione sono i dieci elementi che dovrei visualizzare che sono presi dagli elementi totali. Suppongo che quello che sto facendo qui sia alquanto confuso. Sto filtrando su displayItems, mentre dovrei davvero essere filtrato su totalItems. Penso di aver bisogno di fare il filtraggio all'interno di una funzione nel controller. Permettimi di modificare la domanda per riflettere questo ... –

Crea una semplice demo di plunker. Ho notato diversi array ma non abbastanza codice che mostra per risolverli – charlietfl

Ho aggiornato la domanda con un plnkr e modificata per chiarezza ... –

-2

Si prega di modificare questo tipo, ma se si cerca solo un campo relativo perché si cerca specifico. che non ce n'è bisogno se hai più campo allora ce la fai. Questo è il tuo codice in qualche modifica spero che funzioni.

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

fonte

2016-07-17 17:56:30 VjyV

inserimento del filtro angolare con impaginazione

risposta

Problemi correlati