使用 angularJS 智能 table

Question

我想为我的网站使用 AngularJS smart table。我已经阅读了文档（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 工厂，那么这是一个相当直接的示例。

当您使用工厂服务时，它会执行工厂定义中的代码和 return 任何您想调用的函数。

所以上面的代码所做的是，当您使用此工厂服务时，只需将随机项目 (Avengers) 列表生成到数组 randomItems 中，这一步非常简单。如果您查看 createRandomItem(id) 和其后的 for 循环。

然而，诀窍在于 getPage() 以及 Resource factory 是什么 returning。那么，让我们继续旅行吧。

在调用 Resourse.getPage() 时使用 Resource 工厂的代码中，它将 return 一个 promise 对象，您可以在该对象上调用其他 JS 函数。在 getPage() 内部，如您所见，它设置了一个 timeout 来调用 resolve，其中包含一个包含变量 data 和 numberOfPages 的对象，在 deffered 对象，它在 deffered 对象的 promise 上触发 doneCallback。

所以当你服务时

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 毫秒过去时，传递给 done 的 function/callback 被触发。

总结与回答

注意：请先阅读上面的内容，我花了很多时间才写的。

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

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

终于在使用服务时

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

P.S.1。欢迎大家在评论区提问

使用 angularJS 智能 table

Using angularJS smart table

javascript

angularjs

smart-table

总结与回答