javascript - 使用 angularJS 智能表

Question

我想在我的网站上使用 AngularJS 智能表。我已经阅读了文档(smart table)。很难理解 app.factory 在这里是如何工作的。我想知道如何为数据库(mongodb)中的数据实现createRandomItem函数。

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {

    //this would be the service to call your server, a standard bridge between your model an $http

    // the database (normally on your server)
    var randomsItems = [];

    function createRandomItem(id) {
        var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
        return {
            id: id,
            name: heroes[Math.floor(Math.random() * 7)],
            age: Math.floor(Math.random() * 1000),
            saved: Math.floor(Math.random() * 10000)
        };

    }

    for (var i = 0; i < 1000; i++) {
        randomsItems.push(createRandomItem(i));
    }


    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
    //in our case, it actually performs the logic which would happened in the server
    function getPage(start, number, params) {

        var deferred = $q.defer();

        var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;
if (params.sort.predicate) {
            filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
        }

        var result = filtered.slice(start, start + number);

        $timeout(function () {
            //note, the server passes the information about the data set size
            deferred.resolve({
                data: result,
                numberOfPages: Math.ceil(filtered.length / number)
            });
        }, 1500);


        return deferred.promise;
    }

    return {
        getPage: getPage
    };

}]);

Answer 1

好吧...我的闪耀时刻..:D....开玩笑..你的答案如下..

如果您熟悉 Angular 工厂，那么这是一个相当简单的示例。

当您使用工厂服务时，它会执行工厂定义内的代码并返回您想要调用函数的任何内容。

所以上面的代码所做的就是当你使用这个工厂服务时，简单地在数组 randomItems 中生成一个随机项目(复仇者)列表。这一步相当简单。如果你看createRandomItem(id)和 for之后循环。

然而，窍门在于 getPage()什么是Resource factory正在返回。那么，让我们踏上旅程吧。

在代码中 Resource当您调用Resourse.getPage()时使用工厂它会返回 promise您可以在其上调用其他 JS 函数的对象。和里面getPage()如您所见，它设置了 timeout调用resolve具有变量 data 的对象和numberOfPages在其中，在 deffered触发的对象doneCallback关于promise其中deffered对象。

所以当你提供服务时

Resourse.getPage(1,2,3) // please see the use of these arguments inside the  getPage function
.done(function(result){
   result.data; //the fake server data from the factory
   result.numberOfPages; //this is computed in factory as well
});

当 1500 毫秒过去时，传递给 did 的函数/回调被触发。

总结和回答

注意:请先阅读上面的内容，我花了很长时间才写这篇文章。

现在解决您的问题。你能做的就是修改这个

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) 

至

app.factory('Resource', ['$http', '$q', '$filter', '$timeout', function ($http, $q, $filter, $timeout)

使用$http检索data从服务器或 mongodb并用来自服务器的数据填充一个数组。

$http.get(server_url).success(function(response){
    //....do something with the response from the server like filtering etc.. 
    //finally..
    deferred.resolve({
       data: response
    });
});

使用服务时的finally

Resourse.getPage(1,2,3) //what ever you want to pass its not necessory to pass the same as above
  .done(function(response){
     //do what ever you want to do with response from your factory.. PHEW...
   });

P.S.0。这是我迄今为止提供的最长的答案..PHEW:P

PS1。有任何问题欢迎在评论中提问