The watch function remains inactive until it is triggered by an event

Question

The watch function remains inactive until it is triggered by an event

My current issue involves using $watch for pagination on my page. Unfortunately, the data is not appearing until I click on one of the buttons.

Below is the relevant code snippet:

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

In this setup, the data is retrieved in $scope.faqData from the service. However, the $scope.filteredFaqData remains empty until I actually interact with the paging tabs.

javascript arrays angularjs json

Answer 1

Answer №1

Perhaps this approach will solve the issue:

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

    //create a reusable function
    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 () {
        //invoke the update function
        updateFilteredData();
    });

    //initial invocation
    updateFilteredData();
});

Note: It's advisable to use watchGroup as it aligns with Angular's approach for achieving the desired functionality (documentation).

Answer 2

Perhaps this approach will solve the issue:

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

    //create a reusable function
    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 () {
        //invoke the update function
        updateFilteredData();
    });

    //initial invocation
    updateFilteredData();
});

Note: It's advisable to use watchGroup as it aligns with Angular's approach for achieving the desired functionality (documentation).

Answer 3

Answer №2

My function Faq.getFaqs() was running asynchronously, causing an issue where no data would display when the page loaded for the first time. To solve this, I implemented a $timeout to delay the $watch functionality, which successfully resolved the issue.

Below is the updated code snippet:

$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]);
        var end = begin + newValues[1];

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

Answer 4

My function Faq.getFaqs() was running asynchronously, causing an issue where no data would display when the page loaded for the first time. To solve this, I implemented a $timeout to delay the $watch functionality, which successfully resolved the issue.

Below is the updated code snippet:

$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]);
        var end = begin + newValues[1];

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

The watch function remains inactive until it is triggered by an event

Answer №1

Answer №2

Similar questions

A method for sequentially exploding a nested JSON with index by utilizing posexplode_outer

Exploring uncharted territory with the Navigator component in React Native

What strategies are most effective for managing JSON containing keys without quotes?

Having difficulty executing the multichain-node npm module on the client side (browser)

What is the best method for converting this intricate JSON data into a structured SQL database table?

What is the best way to create a directive that will hide a div when clicking anywhere on the

Exploring the Power of Laravel 5.5 and Vue.js 2.x for Efficient API Calls

Display multiple markers on a Google Map using google-map-react library

Issue with connect() method in React-Redux resulting in a TypeError

In my current project, I am implementing a feature in Angular 6 to close a Bootstrap modal once the server successfully receives the necessary data

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

What is the best way to export assets into a React Native JS file?

Serialization and deserialization of Jackson Arrays

Explore JSON data and populate dropdown and select elements with corresponding details

Breaking the website with an HTML comment

Enhance your search experience with Vue.js by highlighting important keywords across multiple search

Sending an Angular $http post request to a MVC action but the parameter is coming through as

AngularJS directive failing to execute

Exploring the multidimensional statistical capabilities in the sweep function of R programming

How can you modify two distinct append values individually in AngularJS?