$Watch is not working until a event is fired

Question

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

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

set basic value to $scope.filteredFaqData = 5 not with empty [], or ,'currentPage + numPerPage' cant not understand, if you wanna watch more than one scope varible use watch groups http://stackoverflow.com/questions/11952579/watch-multiple-scope-attributes — nisar, May 02 '16 at 11:08
@nisar It didn't make any change. Still getting the same issue — Shahzad Ahamad, May 02 '16 at 11:26
@nisar as you told , I used $watchGroup in place of $watch `$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); });` — Shahzad Ahamad, May 02 '16 at 12:45
@nisar no error in the console. It is the issue of the $watch. It is not updating **$scope.filteredFaqData** when the page is loading but when i fire a even i.e when i click paging tabs it is showing data then — Shahzad Ahamad, May 02 '16 at 12:49
What is your `Faq` service using for the ajax call? If it's not $resource or $http, then use one of those. They will cause your watch to fire when the data is returned. — DerekMT12, May 02 '16 at 14:36

score 0 · Answer 1 · answered May 02 '16 at 13:06

0

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).

answered May 02 '16 at 13:06

Fidel90

1,828
6
27
63

didn't work still page loads without any data but when i click on the paging tabs data appears. – Shahzad Ahamad May 02 '16 at 13:36
1

How does your `Faq.getFaqs()` function work? Is it save that the data is available immediately? Or is it an async function that holds it result in the future. Maybe there's no result available when the filter runs initally... – Fidel90 May 02 '16 at 13:40
I am getting the data from the service here is the code `var self = this; this.faqList = []; $http.get('/Json/faq.json').then(function (result) { result.data.forEach(function (item) { self.addfaq(item) }) }); this.getFaqs = function () { return this.faqList; };` – Shahzad Ahamad May 02 '16 at 13:45
I think you are right data is not availble when the page loads for the first time.So can i use timeout here to delay the call of the function – Shahzad Ahamad May 02 '16 at 13:53
It worked thank you for pointing out the problem . I have posted the answer. – Shahzad Ahamad May 02 '16 at 14:23

score 0 · Accepted Answer · answered May 02 '16 at 14:22

0

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.

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);

answered May 02 '16 at 14:22

Shahzad Ahamad

809
1
11
30

1

Hey, great that you've found the issue. I would recommend you to not use $timeout but Promises instead. These would be ideal for your kind of situation. Read more about Promises in angular here: https://docs.angularjs.org/api/ng/service/$q – Fidel90 May 03 '16 at 04:56
@Fidel90 Does it make any difference? I mean can it cause nay problem in the program? – Shahzad Ahamad May 03 '16 at 10:13
1

Well, you can't place a bet on that your http request has always finished within 100ms. As soon as your request needs a little bit longer (due to a bad connection or whatever), your $timeout executes too fast and your data isn't available. A Promise guarantees that the data is ready to be worked with. Taking a deeper look into Promises is worth the effort :) – Fidel90 May 03 '16 at 10:58
@Fidel90 ok, Thank you for the suggestion. I will make the required changes. – Shahzad Ahamad May 03 '16 at 11:18

$Watch is not working until a event is fired

2 Answers2