$ Watch在事件被触发之前无效

I am using $watch for pagination of the data in my page.But It is not showing data till i click on any of the buttons

我正在使用$ watch来查看我页面中的数据分页。但是在我点击任何按钮之前它没有显示数据

Here is the 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);
    });
})

I am getting the data in the $scope.faqData from the service.But the $scope.filteredFaqData is empty till I click on the paging tabs

我从服务中获取$ scope.faqData中的数据。但$ scope.filteredFaqData为空,直到我点击分页选项卡

2 个解决方案

#1

Maybe this will do the 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();
});

Note: Better use watchGroup as it is angulars way to do what you want (documentation).

注意:最好使用watchGroup,因为它是你想做的事情(文档)。

#2

Actually my function Faq.getFaqs() was executing asynchronously . when the page loads for the first time, there was no data to display. So i used $timeout to dilay the $watch and it is working finr now.

实际上我的函数Faq.getFaqs()是异步执行的。当页面第一次加载时,没有数据显示。所以我用$ timeout来消耗$ watch,现在它正在运行。

Here is the 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);

#1