Angularjs - 使用数据库中的新数据重新加载范围

时间:2016-12-02 15:52:58

标签: javascript mysql angularjs filter scope

我正在使用Angularjs构建搜索页面。一切正常,但我担心的是,如果用户在搜索页面加载后将新条目添加到数据库中会怎么样?新条目不会显示在过滤器上。怎么做到这一点?以下是我的代码。任何帮助表示赞赏。

var app = angular.module('searchApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('searchCrtl', function ($scope, $http, $timeout) {
    $scope.showLoader = true;
    $http.get('PostsController.do?cmd=postDetails').success(function(data){
        $scope.showLoader = false;

        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 10000; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            console.log($scope.list);
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

有没有办法在过滤项目中使用数据库中的新数据加载范围?

1 个答案:

答案 0 :(得分:0)

tmp解决方法是每10秒查询一次服务器。您仍然需要了解websocket是什么,它的用途以及如何在后端和前端使用它。

app.controller('searchCrtl', function ($scope, $http, $timeout) {
    $scope.showLoader = true;

    // <--
    $scope.currentPage = 1;
    $scope.entryLimit = 10000;
    setInterval(function () {
        $http.get('PostsController.do?cmd=postDetails').success(function(data){
            $scope.showLoader = false;
            $scope.list = data;
            $scope.filteredItems = $scope.list.length; //Initially for no filter  
            $scope.totalItems = $scope.list.length;
        });
    }, 10000);  // update data every 10 sec
    // -->


    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            console.log($scope.list);
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});