Angularjs: dir-pagination-controls ไม่แสดงหน้าถัดไปแม้ว่าจะกดปุ่มหน้าแล้วก็ตาม

ฉันพยายามรวม dir-pagination-controls แต่ไม่สามารถแสดงหน้าเว็บตามหน้าที่เลือกได้

<div ng-controller="TableController as tc">
    <table>
        <tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
            <tr ng-click="tc.showOrderDetail(order.id)">
                <td ng-bind="order.id"></td>
                <!-- Simliar lines are here -->
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls 
       boundary-links="true" 
       on-page-change="tc.pageChangeHandler(newPageNumber)" 
       template-url="dirPagination.tpl.html">
    </dir-pagination-controls>
</div>

table นี้แสดงสิ่งที่ฉันคาดหวัง อย่างไรก็ตาม ตัวควบคุมการแบ่งหน้าผลลัพธ์จะไม่แสดงหน้าถัดไปเมื่อฉันกดปุ่มใดๆ

นี่คือส่วนที่เกี่ยวข้องของสคริปต์

angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){

    var instance = this;

    this.orders = [];
    $http({
        //works fine
    }).then(function (response) {
        instance.orders = response.data;
        instance.totalOrders = instance.orders.length;
        //The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
    });

    this.pageChangeHandler = function(num) {
        console.log('going to page ' + num);
    };

    this.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

UPDATE pageChangeHandler แสดงว่าปุ่มไหนถูกกด แต่หน้าไม่เปลี่ยนแปลง (อย่างอื่นก็ดีหมด)

รหัสนี้อิงตาม เอกสารอย่างเป็นทางการและการสาธิตแต่ ฉันไม่พบสิ่งที่ผิดจริง

ฉันขอขอบคุณหากคุณให้คำแนะนำใด ๆ


person Hiroki    schedule 14.04.2016    source แหล่งที่มา
comment
บรรทัด on-page-change=pageChangeHandler(newPageNumber) ไม่ควรเป็น on-page-change=tc.pageChangeHandler(newPageNumber) หรือไม่   -  person Parthasarathy    schedule 14.04.2016
comment
ถูกต้องครับ!! ฉันจะแก้ไขโพสต์นี้...   -  person Hiroki    schedule 14.04.2016
comment
คุณกำลังเรียกใช้เมธอด this.pageChanged() ทุกที่หรือไม่ ฉันเดาว่าคุณอาจต้องเรียกใช้จากฟังก์ชัน pageChangedHandler()   -  person Parthasarathy    schedule 14.04.2016


คำตอบ (1)


วิธีแก้ไขคือการลบ total-items ออกจากคำสั่ง dir-paginate ของคุณ นี่คือ phunker พร้อมด้วยตัวอย่างง่ายๆ

แอตทริบิวต์ total-items จะใช้เมื่อคุณทำการเรียกแบบอะซิงโครนัสเพื่อรับรายการหน้า แต่ละรายการ ดังนั้นการโทรแบบ async ครั้งแรกคุณจะได้รับรายการสำหรับหน้าแรก และเมื่อคุณเปลี่ยนหน้า คุณควรได้รับจากเซิร์ฟเวอร์รายการสำหรับหน้าที่เกี่ยวข้อง total-items บอกคำสั่งการแบ่งหน้าว่าคุณมีเพจทั้งหมดกี่หน้า ดังนั้นจึงรู้วิธีสร้างองค์ประกอบ

หากคุณต้องการการเรียกแบบอะซิงโครนัสสำหรับแต่ละเพจ คุณใช้ total-items และคุณใช้ pageChanged โดยที่คุณทำการเรียกแบบอะซิงก์อื่น

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}
person Lulylulu    schedule 14.04.2016