使用angularJS智能表

时间:2015-11-10 06:30:35

标签: javascript angularjs smart-table

我想在我的网站上使用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
    };

}]);

1 个答案:

答案 0 :(得分:3)

好的......我的时间闪耀......:D ......开个玩笑......你的回答是吼叫......

这是一个相当直接的例子,如果你熟悉角度工厂。

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

所以上面的代码正在做的是当你使用这个工厂服务时,只需在数组randomItems中生成一个随机项(复仇者)列表,该步骤非常简单。如果你看一下createRandomItem(id)for之后的循环。

然而,诀窍在于getPage()以及Resource factory正在返回的内容。所以,让我们继续旅行。

在调用Resource时使用Resourse.getPage()工厂的代码中,它将返回一个promise对象,您可以在其上调用其他JS函数。在getPage()内,您可以看到它已设置timeout来调用resolve,其中包含变量datanumberOfPages的对象,{ {1}}在deffered对象的doneCallback上触发promise的对象。

所以当你像

那样服务时
deffered

当1500ms通过时,传递给done的函数/回调变为trigerred。

摘要和答案

注意:请先阅读以上内容,我花了很多时间来写这篇文章。

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

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

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

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

P.S.1。请随时在评论中提出任何问题