$ Uhr funktioniert nicht, bis ein Ereignis ausgelöst wird

Question

I $ Uhr für die Paginierung der Daten verwende in meinem page.But Es ist nicht Daten, die zeigen, bis ich

hier auf eine der Schaltflächen klicken Sie auf den Code.

.controller('AppCtrl', function ($scope, $modal, Faq) { 
    $scope.filteredFaqData = []; 
    $scope.currentPage = 1; 
    $scope.numPerPage = 5; 
    $scope.maxSize = 5; 
    $scope.faqData = []; 
    $scope.faqData = Faq.getFaqs(); 
    $scope.$watch('currentPage + numPerPage', function() { 
     var begin = (($scope.currentPage - 1) * $scope.numPerPage) 
      , end = begin + $scope.numPerPage; 
     $scope.filteredFaqData = $scope.faqData.slice(begin, end); 
    }); 
}) 

Ich erhalte die Daten in dem $ scope.faqData vom Service bereitzustellen der $ scope.filteredFaqData ist leer, bis ich auf dem Paging-Tabs klicken

Answer 1

Eigentlich wurde meine Funktion Faq.getFaqs() asynchron ausgeführt. Wenn die Seite zum ersten Mal geladen wird, wurden keine Daten angezeigt. Also habe ich $ timeout benutzt um die $ watch zu dilayern und es funktioniert jetzt. Hier

ist der Code

$scope.filteredFaqData = []; 
    $scope.currentPage = 1; 
    $scope.numPerPage = 5; 
    $scope.maxSize = 5; 
    $scope.faqData = []; 

     $scope.faqData = Faq.getFaqs(); 
     $timeout(function lateDisplay(){ 
      $scope.$watchGroup(['currentPage','numPerPage'], function (newValues, oldValues, scope) { 
       var begin = ((newValues[0] - 1) * newValues[1]) 
       , end = begin + newValues[1]; 

       $scope.filteredFaqData = $scope.faqData.slice(begin, end); 
      }); 
     },100); 

Answer 2

Vielleicht wird dies die Trick:

.controller('AppCtrl', function ($scope, $modal, Faq) { 

    //create function that can be called on several places 
    var updateFilteredData = function() { 
     var begin = (($scope.currentPage - 1) * $scope.numPerPage), 
      end = begin + $scope.numPerPage; 

     $scope.filteredFaqData = $scope.faqData.slice(begin, end); 
    }; 

    $scope.filteredFaqData = []; 
    $scope.currentPage = 1; 
    $scope.numPerPage = 5; 
    $scope.maxSize = 5; 
    $scope.faqData = Faq.getFaqs(); 

    $scope.$watchGroup(['currentPage', 'numPerPage'], function() { 
     //call on update 
     updateFilteredData(); 
    }); 

    //initial call 
    updateFilteredData(); 
}); 

Hinweis: Bessere Nutzung watchGroup wie es winkelförmigen Stangen Art und Weise zu tun, was Sie wollen (documentation).