2016-08-04 2 views
1

イベントの一覧を表示したい状況がありますが、うまくいきます。 イベントを過去に表示するかどうかを選択できるかどうかにかかわらず、チェックボックスフィルタを作成しました。 1ページあたりの最大イベント数は10であるため、ページネーションが機能し始め、2ページが利用可能であることがわかります(現在12イベント)。データのフィルタリング時にページ番号が変更されない

過去にイベントを表示するためにチェックボックスをオフにすると、過去に4イベントしか残っていません。 問題は、私のページネーションでは2つのページがあることがわかりますが、2ページ目をクリックすると空のリストが表示されます(イベントは表示されません)。

良いことは、私のフィルタが働いている;)

マイコントローラー:

angular.module('app') 
.controller("UserProfileController", ["userService", "eventService", "$routeParams", "$scope", "currentuserCache", "userOverviewStateService", 
    function(userService, eventService, $routeParams, $scope, currentuserCache, userOverviewStateService) { 
$scope.behavior = { 
     currentPage: 1, 
    }; 
$scope.maxSizePagination = 3; 
$scope.itemsPerPage = 10; 


self.hideOldDates = function() { 
     if (self.showOldEvents) { 
      return function() { 
       return true; 
      }; 
     } else { 
      return function(event) { 
       var yesterday = moment(new Date()).subtract(1, 'days'); 
       var evtDate = moment(event['date'], 'DD-MM-YYYY'); 
       return evtDate > yesterday; 
      }; 
     } 
    }; 

function createEventArray(){ 
     var events = self.user._events; 
     self.eventArray = []; 

     for (var i in events) { 
      var dates = self.eventDates(events[i], self.user); 
      for (var j in dates) { 
       var event = {}; 
       event._id = events[i]._id; 
       event.title = events[i].title; 
       event.date = dates[j]; 
       event.dateForSorting = moment(event.date, 'DD-MM-YYYY').format("YYYY-MM-DD"); 
       event.start = moment(events[i].start).format('HH:mm'); 
       event.end = moment(events[i].end).format('HH:mm'); 
       event.eventStatus = events[i].eventStatus; 
       self.eventArray.push(event); 
      } 
     }; 
     }; 

HTML

<tbody> 
     <tr ng-repeat="event in profileCtrl.eventArray | orderBy: ['dateForSorting', 'start'] | filter: profileCtrl.hideOldDates() | start: (behavior.currentPage - 1) * itemsPerPage | limitTo: itemsPerPage"> 
      <td> <a href="/#/eventProfile/{{event._id}}/{{event.date}}">{{event.title}}</a> </td> 
      <td> {{ event.date }} </td> 
      <td> {{ event.start }} </td> 
      <td> {{ event.end }} </td> 
      <td> {{ event.eventStatus | translate }} </td> 
      <td> 
       <button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event)">{{ 'unSubscribe' | translate }}</button> 
      </td> 
     </tr> 
<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="profileCtrl.eventArray.length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination> 

<input type="checkbox" ng-model="profileCtrl.showOldEvents"> {{'includeOldDates' | translate}} </input> 
    </tbody> 

したがって、すべてのイベント(将来の&過去)が選択されても、すべて正常に動作します。 14イベント= 2ページ。しかし、未来のイベントだけを見たいときは、今後4イベント、2ページを表示します。 (もちろん1でなければならない)。

誰かが私に盲目的なアドバイスをしてくれることを願っています!

ありがとうございます!

答えて

1

私はどんなプランナーも持っていないので、これはうまくいくとは思えません。

しかし、私たちは同様の問題を抱えており、長さを表示するためにフィルターを使用しました。 と同様に、

{{ (profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length }} 

のでご

<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="(profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination> 
+0

ありがとうNITZで、それが働いています! 私は別のページネーションを持っていますが、合計アイテムは配列に基づいているのではなく、変数に基づいています。 ここで修正する方法を調べる必要があります。 – Roy

関連する問題