如何使AngularJs UI自舉數據

我不知道如何使pagination按鈕與我的工作數據分頁的工作。我必須以某種方式過濾嗎？

這是我顯示我的數據：

<div class="col-xs-12 col-md-4 content appear" ng-repeat="post in filterPosts | filter:searchPost | orderBy: sorting.orderBy:sorting.direction | filter : filterPost track by post.id">

之後，這就是分頁部分是：

<div ng-controller="PaginationController" class="col-xs-12" style="height: 50px;">     
<pagination class="pagination" style="right: 10px; position: absolute; margin: 0px;" total-items="total_items" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>

沒有爲分頁部分plunker例子，但沒有涉及的數據。這裏是link

來源

2015-09-24 VNVN

是的，你需要過濾你的數據。分頁指令只是爲您提供一種向用戶展示可能頁面的列表，並讓用戶輕鬆控制當前頁面。您需要使用頁面大小（默認爲10）和當前頁面值來過濾數據並顯示正確的頁面。要做到這一點

的一種方法是增加一個額外的過濾器，以幫助跳繩：

app.filter('offset', function() { 
    return function(input, start) { 
     return input.slice(start); 
    }; 
})

，然後使用此與limitTo控制尋呼

<div class="col-xs-12 col-md-4 content appear" 
    ng-repeat="post in filterPosts | filter:searchPost 
    | orderBy: sorting.orderBy:sorting.direction 
    | filter : filterPost track by post.id 
    | offset: (bigCurrentPage - 1) * 10 
    | limitTo: 10">

例JSFiddle here

來源

2015-09-26 16:07:05 sheilak

謝謝你非常想要答案。小提琴很棒。還有一件事，我目前有2個應用程序： 1）var app = angular.module（'app1'，['ngAnimate'，'ui.bootstrap']）; With controller1 2）angular.module（「ui.bootstrap」，[「ui.bootstrap.pagination」]）; 與控制器2 是否可以在同一個html頁面上同時使用controller1和controller2？如果是的話，我該怎麼做？ – VNVN

是的，但您必須手動引導它們 - 請參閱[此鏈接瞭解更多信息]（http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page）。根據你的目標，2款應用可能不是最好的方式。如果該鏈接沒有完全回答您的問題，我會建議創建另一個問題並描述整個問題。 – sheilak

使用上面的app.filter部分後，我得到了這個錯誤 input.slice不是函數我是否需要包含任何額外的文件？非常感謝您的幫助 – VNVN

如何使AngularJs UI自舉數據

回答

相關問題