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

【问题标题】：Angularjs - Reload scope with new data from databaseAngularjs - 使用数据库中的新数据重新加载范围
【发布时间】：2016-12-02 15:52:58
【问题描述】：

我正在使用 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;
    };
});

有没有办法让作用域在过滤项目时从数据库中加载新数据？

【问题讨论】：

数据库中的新数据？您可能需要 websocket 在数据库更新时得到通知
怎么用？你给我一些链接/
与 Http 不同，Websocket 使后端服务器和客户端浏览器可以根据需要进行通信，而无需创建新连接。 MDN 拥有最好的文档。你可能不需要它，因为它消耗很多资源，除非你需要它是实时的
我只需要它用于一个小型应用程序。你有关于如何将它与 angularjs 一起使用的教程链接吗？
你的服务器支持 websocket 吗？如果还没有，我建议你和好老的long polling

标签： javascript mysql angularjs filter scope

【解决方案1】：

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

【讨论】：